reactfire
- Version 4.2.3
- Published
- 606 kB
- 2 dependencies
- MIT license
Install
npm i reactfire
yarn add reactfire
pnpm add reactfire
Overview
Firebase library for React
Index
Variables
- AnalyticsSdkContext
- AppCheckSdkContext
- AuthSdkContext
- DatabaseSdkContext
- FirestoreSdkContext
- FunctionsSdkContext
- PerformanceSdkContext
- RemoteConfigSdkContext
- StorageSdkContext
- useInitAnalytics
- useInitAppCheck
- useInitAuth
- useInitDatabase
- useInitFirestore
- useInitFunctions
- useInitPerformance
- useInitRemoteConfig
- useInitStorage
- version
Functions
- AnalyticsProvider()
- AppCheckProvider()
- AuthCheck()
- AuthProvider()
- checkIdField()
- checkinitialData()
- checkOptions()
- ClaimsCheck()
- DatabaseProvider()
- FirebaseAppProvider()
- FirestoreProvider()
- FunctionsProvider()
- PerformanceProvider()
- preloadFirestoreDoc()
- preloadObservable()
- preloadUser()
- RemoteConfigProvider()
- StorageImage()
- StorageProvider()
- SuspenseWithPerf()
- useAnalytics()
- useAppCheck()
- useAuth()
- useCallableFunctionResponse()
- useDatabase()
- useDatabaseList()
- useDatabaseListData()
- useDatabaseObject()
- useDatabaseObjectData()
- useFirebaseApp()
- useFirestore()
- useFirestoreCollection()
- useFirestoreCollectionData()
- useFirestoreDoc()
- useFirestoreDocData()
- useFirestoreDocDataOnce()
- useFirestoreDocOnce()
- useFunctions()
- useIdTokenResult()
- useIsSuspenseEnabled()
- useObservable()
- usePerformance()
- useRemoteConfig()
- useRemoteConfigAll()
- useRemoteConfigBoolean()
- useRemoteConfigNumber()
- useRemoteConfigString()
- useRemoteConfigValue()
- useSigninCheck()
- useStorage()
- useStorageDownloadURL()
- useStorageTask()
- useSuspenseEnabledFromConfigAndContext()
- useUser()
Classes
Interfaces
Type Aliases
Variables
variable AnalyticsSdkContext
const AnalyticsSdkContext: React.Context<any>;
variable AppCheckSdkContext
const AppCheckSdkContext: React.Context<any>;
variable AuthSdkContext
const AuthSdkContext: React.Context<any>;
variable DatabaseSdkContext
const DatabaseSdkContext: React.Context<any>;
variable FirestoreSdkContext
const FirestoreSdkContext: React.Context<any>;
variable FunctionsSdkContext
const FunctionsSdkContext: React.Context<any>;
variable PerformanceSdkContext
const PerformanceSdkContext: React.Context<any>;
variable RemoteConfigSdkContext
const RemoteConfigSdkContext: React.Context<any>;
variable StorageSdkContext
const StorageSdkContext: React.Context<any>;
variable useInitAnalytics
const useInitAnalytics: InitSdkHook<Analytics>;
variable useInitAppCheck
const useInitAppCheck: InitSdkHook<AppCheck>;
variable useInitAuth
const useInitAuth: InitSdkHook<Auth>;
variable useInitDatabase
const useInitDatabase: InitSdkHook<Database>;
variable useInitFirestore
const useInitFirestore: InitSdkHook<Firestore>;
variable useInitFunctions
const useInitFunctions: InitSdkHook<Functions>;
variable useInitPerformance
const useInitPerformance: InitSdkHook<FirebasePerformance>;
variable useInitRemoteConfig
const useInitRemoteConfig: InitSdkHook<RemoteConfig>;
variable useInitStorage
const useInitStorage: InitSdkHook<FirebaseStorage>;
variable version
const version: string;
Functions
function AnalyticsProvider
AnalyticsProvider: ( props: React.PropsWithChildren<{ sdk: Analytics }>) => JSX.Element;
function AppCheckProvider
AppCheckProvider: ( props: React.PropsWithChildren<{ sdk: AppCheck }>) => JSX.Element;
function AuthCheck
AuthCheck: ({ fallback, children, requiredClaims,}: AuthCheckProps) => JSX.Element;
Deprecated
Use
useSigninCheck
insteadConditionally render children based on signed-in status and [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims).
Meant for Concurrent mode only (
<FirebaseAppProvider suspense=true />
). [More detail](https://github.com/FirebaseExtended/reactfire/issues/325#issuecomment-827654376).
function AuthProvider
AuthProvider: (props: React.PropsWithChildren<{ sdk: Auth }>) => JSX.Element;
function checkIdField
checkIdField: (options: ReactFireOptions) => any;
function checkinitialData
checkinitialData: (options: ReactFireOptions) => any;
function checkOptions
checkOptions: (options: ReactFireOptions, field: string) => any;
function ClaimsCheck
ClaimsCheck: ({ user, fallback, children, requiredClaims,}: ClaimsCheckProps) => JSX.Element;
Deprecated
Use
useSigninCheck
insteadConditionally render children based on [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims).
Meant for Concurrent mode only (
<FirebaseAppProvider suspense=true />
). [More detail](https://github.com/FirebaseExtended/reactfire/issues/325#issuecomment-827654376).
function DatabaseProvider
DatabaseProvider: ( props: React.PropsWithChildren<{ sdk: Database }>) => JSX.Element;
function FirebaseAppProvider
FirebaseAppProvider: ( props: React.PropsWithChildren<FirebaseAppProviderProps>) => JSX.Element;
function FirestoreProvider
FirestoreProvider: ( props: React.PropsWithChildren<{ sdk: Firestore }>) => JSX.Element;
function FunctionsProvider
FunctionsProvider: ( props: React.PropsWithChildren<{ sdk: Functions }>) => JSX.Element;
function PerformanceProvider
PerformanceProvider: ( props: React.PropsWithChildren<{ sdk: FirebasePerformance }>) => JSX.Element;
function preloadFirestoreDoc
preloadFirestoreDoc: ( refProvider: () => Promise<DocumentReference>) => Promise< import('./SuspenseSubject').SuspenseSubject<DocumentSnapshot<DocumentData>>>;
Preload a subscription to a Firestore document reference.
Use this to warm up
useFirestoreDoc
for a specific document
function preloadObservable
preloadObservable: <T>(source: Observable<T>, id: string) => SuspenseSubject<T>;
function preloadUser
preloadUser: ( authResolver: () => Promise<Auth>) => Promise<User | null | undefined>;
function RemoteConfigProvider
RemoteConfigProvider: ( props: React.PropsWithChildren<{ sdk: RemoteConfig }>) => JSX.Element;
function StorageImage
StorageImage: ( props: StorageImageProps & React.DetailedHTMLProps< React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement >) => JSX.Element;
function StorageProvider
StorageProvider: ( props: React.PropsWithChildren<{ sdk: FirebaseStorage }>) => JSX.Element;
function SuspenseWithPerf
SuspenseWithPerf: ({ children, traceId, fallback,}: SuspensePerfProps) => JSX.Element;
function useAnalytics
useAnalytics: () => Analytics;
function useAppCheck
useAppCheck: () => AppCheck;
function useAuth
useAuth: () => Auth;
function useCallableFunctionResponse
useCallableFunctionResponse: <RequestData, ResponseData>( functionName: string, options?: ReactFireOptions<ResponseData> & { httpsCallableOptions?: HttpsCallableOptions; data?: RequestData; }) => ObservableStatus<ResponseData>;
Calls a callable function.
Parameter functionName
The name of the function to call
Parameter options
function useDatabase
useDatabase: () => Database;
function useDatabaseList
useDatabaseList: <T = { [key: string]: unknown }>( ref: DatabaseReference | DatabaseQuery, options?: ReactFireOptions<T[]>) => ObservableStatus<QueryChange[] | T[]>;
Subscribe to a Realtime Database list
Parameter ref
Reference to the DB List you want to listen to
Parameter options
function useDatabaseListData
useDatabaseListData: <T = { [key: string]: unknown }>( ref: DatabaseReference | DatabaseQuery, options?: ReactFireOptions<T[]>) => ObservableStatus<T[] | null>;
function useDatabaseObject
useDatabaseObject: <T = unknown>( ref: DatabaseReference, options?: ReactFireOptions<T>) => ObservableStatus<QueryChange | T>;
Subscribe to a Realtime Database object
Parameter ref
Reference to the DB object you want to listen to
Parameter options
function useDatabaseObjectData
useDatabaseObjectData: <T>( ref: DatabaseReference, options?: ReactFireOptions<T>) => ObservableStatus<T>;
function useFirebaseApp
useFirebaseApp: () => FirebaseApp;
function useFirestore
useFirestore: () => Firestore;
function useFirestoreCollection
useFirestoreCollection: <T = DocumentData>( query: FirestoreQuery<T>, options?: ReactFireOptions<T[]>) => ObservableStatus<QuerySnapshot<T>>;
Subscribe to a Firestore collection
function useFirestoreCollectionData
useFirestoreCollectionData: <T = DocumentData>( query: FirestoreQuery<T>, options?: ReactFireOptions<T[]>) => ObservableStatus<T[]>;
Subscribe to a Firestore collection and unwrap the snapshot into an array.
function useFirestoreDoc
useFirestoreDoc: <T = DocumentData>( ref: DocumentReference<T>, options?: ReactFireOptions<T>) => ObservableStatus<DocumentSnapshot<T>>;
Suscribe to Firestore Document changes
You can preload data for this hook by calling
preloadFirestoreDoc
function useFirestoreDocData
useFirestoreDocData: <T = unknown>( ref: DocumentReference<T>, options?: ReactFireOptions<T>) => ObservableStatus<T>;
Suscribe to Firestore Document changes and unwrap the document into a plain object
function useFirestoreDocDataOnce
useFirestoreDocDataOnce: <T = unknown>( ref: DocumentReference<T>, options?: ReactFireOptions<T>) => ObservableStatus<T>;
Get a Firestore document, unwrap the document into a plain object, and don't subscribe to changes
function useFirestoreDocOnce
useFirestoreDocOnce: <T = DocumentData>( ref: DocumentReference<T>, options?: ReactFireOptions<T>) => ObservableStatus<DocumentSnapshot<T>>;
Get a firestore document and don't subscribe to changes
function useFunctions
useFunctions: () => Functions;
function useIdTokenResult
useIdTokenResult: ( user: User, forceRefresh?: boolean, options?: ReactFireOptions<IdTokenResult>) => ObservableStatus<IdTokenResult>;
function useIsSuspenseEnabled
useIsSuspenseEnabled: () => boolean;
function useObservable
useObservable: <T = unknown>( observableId: string, source: Observable<T>, config?: ReactFireOptions) => ObservableStatus<T>;
function usePerformance
usePerformance: () => FirebasePerformance;
function useRemoteConfig
useRemoteConfig: () => RemoteConfig;
function useRemoteConfigAll
useRemoteConfigAll: (key: string) => ObservableStatus<AllParameters>;
Convience method similar to useRemoteConfigValue. Returns allRemote Config parameters.
Parameter key
The parameter key in Remote Config
function useRemoteConfigBoolean
useRemoteConfigBoolean: (key: string) => ObservableStatus<boolean>;
Convience method similar to useRemoteConfigValue. Returns a
boolean
from a Remote Config parameter.Parameter key
The parameter key in Remote Config
function useRemoteConfigNumber
useRemoteConfigNumber: (key: string) => ObservableStatus<number>;
Convience method similar to useRemoteConfigValue. Returns a
number
from a Remote Config parameter.Parameter key
The parameter key in Remote Config
function useRemoteConfigString
useRemoteConfigString: (key: string) => ObservableStatus<string>;
Convience method similar to useRemoteConfigValue. Returns a
string
from a Remote Config parameter.Parameter key
The parameter key in Remote Config
function useRemoteConfigValue
useRemoteConfigValue: (key: string) => ObservableStatus<RemoteConfigValue>;
Accepts a key and optionally a Remote Config instance. Returns a Remote Config Value.
Parameter key
The parameter key in Remote Config
function useSigninCheck
useSigninCheck: ( options?: | SignInCheckOptionsBasic | SignInCheckOptionsClaimsObject | SignInCheckOptionsClaimsValidator) => ObservableStatus<SigninCheckResult>;
Subscribe to the signed-in status of a user.
const { status, data:signInCheckResult } = useSigninCheck();if (status === 'loading') {return <LoadingSpinner />}if (signInCheckResult.signedIn === true) {return <ProfilePage user={signInCheckResult.user}/>} else {return <SignInForm />}Optionally check [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims) of a user as well.
// pass in an object describing the custom claims a user must haveconst {status, data: signInCheckResult} = useSigninCheck({requiredClaims: {admin: true}});// pass in a custom claims validator functionconst {status, data: signInCheckResult} = useSigninCheck({validateCustomClaims: (userClaims) => {// custom validation logic...}});// You can optionally force-refresh the tokenconst {status, data: signInCheckResult} = useSigninCheck({forceRefresh: true, requiredClaims: {admin: true}});
function useStorage
useStorage: () => FirebaseStorage;
function useStorageDownloadURL
useStorageDownloadURL: <T = string>( ref: StorageReference, options?: ReactFireOptions<T>) => ObservableStatus<string | T>;
Subscribe to a storage ref's download URL
Parameter ref
reference to the blob you want to download
Parameter options
function useStorageTask
useStorageTask: <T = unknown>( task: UploadTask, ref: StorageReference, options?: ReactFireOptions<T>) => ObservableStatus<UploadTaskSnapshot | T>;
Subscribe to the progress of a storage task
Parameter task
the task you want to listen to
Parameter ref
reference to the blob the task is acting on
Parameter options
function useSuspenseEnabledFromConfigAndContext
useSuspenseEnabledFromConfigAndContext: ( suspenseFromConfig?: boolean) => boolean;
function useUser
useUser: <T = unknown>( options?: ReactFireOptions<T>) => ObservableStatus<User | null>;
Subscribe to Firebase auth state changes, including token refresh
Parameter options
Classes
class ReactFireError
class ReactFireError extends Error {}
constructor
constructor(code: string, message: string, customData?: Record<string, unknown>);
property code
readonly code: string;
property customData
customData?: Record<string, unknown>;
property name
readonly name: string;
Interfaces
interface AuthCheckProps
interface AuthCheckProps {}
property children
children: React.ReactNode;
property fallback
fallback: React.ReactNode;
property requiredClaims
requiredClaims?: Object;
interface ClaimCheckErrors
interface ClaimCheckErrors {}
index signature
[key: string]: any[];
interface ClaimsCheckProps
interface ClaimsCheckProps {}
property children
children: React.ReactNode;
property fallback
fallback: React.ReactNode;
property requiredClaims
requiredClaims: { [key: string]: any;};
property user
user: User;
interface ClaimsValidator
interface ClaimsValidator {}
call signature
(claims: Claims): { hasRequiredClaims: boolean; errors: ClaimCheckErrors | {};};
interface ObservableStatus
interface ObservableStatus<T> {}
property data
data: T;
The most recent value.
If
initialData
is passed in, the first value ofdata
will be the valuea provided ininitialData
**UNLESS** the underlying observable is ready, in which case it will skipinitialData
.
property error
error: Error | undefined;
Any error that may have occurred in the underlying observable
property firstValuePromise
firstValuePromise: Promise<void>;
Promise that resolves after first emit from observable
property hasEmitted
hasEmitted: boolean;
Indicates whether the hook has emitted a value at some point
If
initialData
is passed in, this will betrue
.
property isComplete
isComplete: boolean;
If this is
true
, the hook will be emitting no further items.
property status
status: 'loading' | 'error' | 'success';
The loading status.
-
loading
: Waiting for the first value from an observable -error
: Something went wrong. CheckObservableStatus.error
for more details -success
: The hook has emitted at least one valueIf
initialData
is passed in, this will skiploading
and go straight tosuccess
.
interface ReactFireOptions
interface ReactFireOptions<T = unknown> {}
property idField
idField?: string;
property initialData
initialData?: T | any;
property startWithValue
startWithValue?: T | any;
Deprecated
use initialData instead
property suspense
suspense?: boolean;
interface SignInCheckOptionsBasic
interface SignInCheckOptionsBasic extends ReactFireOptions<SigninCheckResult> {}
property forceRefresh
forceRefresh?: boolean;
interface SignInCheckOptionsClaimsObject
interface SignInCheckOptionsClaimsObject extends SignInCheckOptionsBasic {}
property requiredClaims
requiredClaims: Claims;
interface SignInCheckOptionsClaimsValidator
interface SignInCheckOptionsClaimsValidator extends SignInCheckOptionsBasic {}
property validateCustomClaims
validateCustomClaims: ClaimsValidator;
interface SuspensePerfProps
interface SuspensePerfProps {}
Type Aliases
type ReactFireGlobals
type ReactFireGlobals = { _reactFireDatabaseCachedQueries: Array<DatabaseQuery>; _reactFireFirestoreQueryCache: Array<FirestoreQuery>; _reactFirePreloadedObservables: Map<string, SuspenseSubject<any>>;};
type SigninCheckResult
type SigninCheckResult = | { signedIn: false; hasRequiredClaims: false; errors: {}; user: null; } | { signedIn: true; hasRequiredClaims: boolean; errors: ClaimCheckErrors; user: User; };
Package Files (11)
Dependencies (2)
Dev Dependencies (34)
- @rollup/plugin-typescript
- @size-limit/preset-small-lib
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/react-hooks
- @types/react
- @types/react-dom
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- @vitejs/plugin-react
- @vitest/ui
- cross-fetch
- eslint
- eslint-plugin-no-only-tests
- eslint-plugin-react
- eslint-plugin-react-hooks
- firebase
- firebase-tools
- globalthis
- husky
- jest-environment-jsdom
- jsdom
- markdown-toc
- prettier
- react
- react-dom
- react-test-renderer
- rollup-plugin-visualizer
- size-limit
- typedoc
- typedoc-plugin-markdown
- typescript
- vite
- vitest
Peer Dependencies (2)
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/reactfire
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/reactfire)
- HTML<a href="https://www.jsdocs.io/package/reactfire"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4086 ms. - Missing or incorrect documentation? Open an issue for this package.