ReactFire reference docs
- AuthCheckProps
- ClaimCheckErrors
- ClaimsCheckProps
- ClaimsValidator
- FirebaseAppProviderProps
- ObservableStatusError
- ObservableStatusLoading
- ObservableStatusSuccess
- ReactFireOptions
- SignInCheckOptionsBasic
- SignInCheckOptionsClaimsObject
- SignInCheckOptionsClaimsValidator
- SuspensePerfProps
- AnalyticsSdkContext
- AppCheckSdkContext
- AuthSdkContext
- DatabaseSdkContext
- FirestoreSdkContext
- FunctionsSdkContext
- PerformanceSdkContext
- RemoteConfigSdkContext
- StorageSdkContext
- version
- AnalyticsProvider
- AppCheckProvider
- AuthCheck
- AuthProvider
- ClaimsCheck
- DatabaseProvider
- FirebaseAppProvider
- FirestoreProvider
- FunctionsProvider
- PerformanceProvider
- RemoteConfigProvider
- StorageImage
- StorageProvider
- SuspenseWithPerf
- checkIdField
- checkOptions
- checkinitialData
- preloadFirestoreDoc
- preloadObservable
- preloadUser
- useAnalytics
- useAppCheck
- useAuth
- useCallableFunctionResponse
- useDatabase
- useDatabaseList
- useDatabaseListData
- useDatabaseObject
- useDatabaseObjectData
- useFirebaseApp
- useFirestore
- useFirestoreCollection
- useFirestoreCollectionData
- useFirestoreDoc
- useFirestoreDocData
- useFirestoreDocDataOnce
- useFirestoreDocOnce
- useFunctions
- useIdTokenResult
- useInitAnalytics
- useInitAppCheck
- useInitAuth
- useInitDatabase
- useInitFirestore
- useInitFunctions
- useInitPerformance
- useInitRemoteConfig
- useInitStorage
- useIsSuspenseEnabled
- useObservable
- usePerformance
- useRemoteConfig
- useRemoteConfigAll
- useRemoteConfigBoolean
- useRemoteConfigNumber
- useRemoteConfigString
- useRemoteConfigValue
- useSigninCheck
- useStorage
- useStorageDownloadURL
- useStorageTask
- useSuspenseEnabledFromConfigAndContext
- useUser
Ƭ ObservableStatus<T
>: ObservableStatusLoading
<T
> | ObservableStatusError
<T
> | ObservableStatusSuccess
<T
>
Name |
---|
T |
Ƭ ReactFireGlobals: Object
Name | Type |
---|---|
_reactFireDatabaseCachedQueries |
DatabaseQuery [] |
_reactFireFirestoreQueryCache |
FirestoreQuery [] |
_reactFirePreloadedObservables |
Map <string , SuspenseSubject <any >> |
Ƭ SigninCheckResult: { errors
: {} ; hasRequiredClaims
: false
; signedIn
: false
; user
: null
} | { errors
: ClaimCheckErrors
; hasRequiredClaims
: boolean
; signedIn
: true
; user
: User
}
Ƭ StorageImageProps: Object
Name | Type |
---|---|
placeHolder? |
JSX.Element |
storage? |
FirebaseStorage |
storagePath |
string |
suspense? |
boolean |
• Const
AnalyticsSdkContext: Context
<undefined
| Analytics
>
• Const
AppCheckSdkContext: Context
<undefined
| AppCheck
>
• Const
AuthSdkContext: Context
<undefined
| Auth
>
• Const
DatabaseSdkContext: Context
<undefined
| Database
>
• Const
FirestoreSdkContext: Context
<undefined
| Firestore
>
• Const
FunctionsSdkContext: Context
<undefined
| Functions
>
• Const
PerformanceSdkContext: Context
<undefined
| FirebasePerformance
>
• Const
RemoteConfigSdkContext: Context
<undefined
| RemoteConfig
>
• Const
StorageSdkContext: Context
<undefined
| FirebaseStorage
>
• Const
version: string
▸ AnalyticsProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : Analytics }> |
Element
▸ AppCheckProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : AppCheck }> |
Element
▸ AuthCheck(«destructured»
): JSX.Element
Deprecated
Use useSigninCheck
instead
Conditionally render children based on signed-in status and custom claims.
Meant for Concurrent mode only (<FirebaseAppProvider suspense=true />
). More detail.
Name | Type |
---|---|
«destructured» |
AuthCheckProps |
JSX.Element
▸ AuthProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : Auth }> |
Element
▸ ClaimsCheck(«destructured»
): Element
Deprecated
Use useSigninCheck
instead
Conditionally render children based on custom claims.
Meant for Concurrent mode only (<FirebaseAppProvider suspense=true />
). More detail.
Name | Type |
---|---|
«destructured» |
ClaimsCheckProps |
Element
▸ DatabaseProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : Database }> |
Element
▸ FirebaseAppProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <FirebaseAppProviderProps > |
Element
▸ FirestoreProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : Firestore }> |
Element
▸ FunctionsProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : Functions }> |
Element
▸ PerformanceProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : FirebasePerformance }> |
Element
▸ RemoteConfigProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : RemoteConfig }> |
Element
▸ StorageImage(props
): Element
Name | Type |
---|---|
props |
StorageImageProps & ClassAttributes <HTMLImageElement > & ImgHTMLAttributes <HTMLImageElement > |
Element
▸ StorageProvider(props
): Element
Name | Type |
---|---|
props |
PropsWithChildren <{ sdk : FirebaseStorage }> |
Element
▸ SuspenseWithPerf(«destructured»
): JSX.Element
Name | Type |
---|---|
«destructured» |
SuspensePerfProps |
JSX.Element
▸ checkIdField(options
): any
Name | Type |
---|---|
options |
ReactFireOptions <unknown > |
any
▸ checkOptions(options
, field
): any
Name | Type |
---|---|
options |
ReactFireOptions <unknown > |
field |
string |
any
▸ checkinitialData(options
): any
Name | Type |
---|---|
options |
ReactFireOptions <unknown > |
any
▸ preloadFirestoreDoc(refProvider
): Promise
<SuspenseSubject
<DocumentSnapshot
<DocumentData
>>>
Preload a subscription to a Firestore document reference.
Use this to warm up useFirestoreDoc
for a specific document
Name | Type |
---|---|
refProvider |
() => Promise <DocumentReference <DocumentData >> |
Promise
<SuspenseSubject
<DocumentSnapshot
<DocumentData
>>>
▸ preloadObservable<T
>(source
, id
, suspenseEnabled?
): SuspenseSubject
<T
>
Name |
---|
T |
Name | Type | Default value |
---|---|---|
source |
Observable <T > |
undefined |
id |
string |
undefined |
suspenseEnabled |
boolean |
false |
SuspenseSubject
<T
>
▸ preloadUser(authResolver
): Promise
<undefined
| null
| User
>
Name | Type |
---|---|
authResolver |
() => Promise <Auth > |
Promise
<undefined
| null
| User
>
▸ useAnalytics(): Analytics
Analytics
▸ useAppCheck(): AppCheck
AppCheck
▸ useAuth(): Auth
Auth
▸ useCallableFunctionResponse<RequestData
, ResponseData
>(functionName
, options?
): ObservableStatus
<ResponseData
>
Calls a callable function.
Name |
---|
RequestData |
ResponseData |
Name | Type | Description |
---|---|---|
functionName |
string |
The name of the function to call |
options? |
ReactFireOptions <ResponseData > & { data? : RequestData ; httpsCallableOptions? : HttpsCallableOptions } |
ObservableStatus
<ResponseData
>
▸ useDatabase(): Database
Database
▸ useDatabaseList<T
>(ref
, options?
): ObservableStatus
<QueryChange
[] | T
[]>
Subscribe to a Realtime Database list
Name | Type |
---|---|
T |
{ [key: string] : unknown ; } |
Name | Type | Description |
---|---|---|
ref |
Query | DatabaseReference |
Reference to the DB List you want to listen to |
options? |
ReactFireOptions <T []> |
ObservableStatus
<QueryChange
[] | T
[]>
▸ useDatabaseListData<T
>(ref
, options?
): ObservableStatus
<T
[] | null
>
Name | Type |
---|---|
T |
{ [key: string] : unknown ; } |
Name | Type |
---|---|
ref |
Query | DatabaseReference |
options? |
ReactFireOptions <T []> |
ObservableStatus
<T
[] | null
>
▸ useDatabaseObject<T
>(ref
, options?
): ObservableStatus
<QueryChange
| T
>
Subscribe to a Realtime Database object
Name | Type |
---|---|
T |
unknown |
Name | Type | Description |
---|---|---|
ref |
DatabaseReference |
Reference to the DB object you want to listen to |
options? |
ReactFireOptions <T > |
ObservableStatus
<QueryChange
| T
>
▸ useDatabaseObjectData<T
>(ref
, options?
): ObservableStatus
<T
>
Name |
---|
T |
Name | Type |
---|---|
ref |
DatabaseReference |
options? |
ReactFireOptions <T > |
▸ useFirebaseApp(): FirebaseApp
FirebaseApp
▸ useFirestore(): Firestore
Firestore
▸ useFirestoreCollection<T
>(query
, options?
): ObservableStatus
<QuerySnapshot
<T
>>
Subscribe to a Firestore collection
Name | Type |
---|---|
T |
DocumentData |
Name | Type |
---|---|
query |
Query <T > |
options? |
ReactFireOptions <T []> |
ObservableStatus
<QuerySnapshot
<T
>>
▸ useFirestoreCollectionData<T
>(query
, options?
): ObservableStatus
<T
[]>
Subscribe to a Firestore collection and unwrap the snapshot into an array.
Name | Type |
---|---|
T |
DocumentData |
Name | Type |
---|---|
query |
Query <T > |
options? |
ReactFireOptions <T []> |
ObservableStatus
<T
[]>
▸ useFirestoreDoc<T
>(ref
, options?
): ObservableStatus
<DocumentSnapshot
<T
>>
Subscribe to Firestore Document changes
You can preload data for this hook by calling preloadFirestoreDoc
Name | Type |
---|---|
T |
DocumentData |
Name | Type |
---|---|
ref |
DocumentReference <T > |
options? |
ReactFireOptions <T > |
ObservableStatus
<DocumentSnapshot
<T
>>
▸ useFirestoreDocData<T
>(ref
, options?
): ObservableStatus
<T
>
Subscribe to Firestore Document changes and unwrap the document into a plain object
Name | Type |
---|---|
T |
unknown |
Name | Type |
---|---|
ref |
DocumentReference <T > |
options? |
ReactFireOptions <T > |
▸ useFirestoreDocDataOnce<T
>(ref
, options?
): ObservableStatus
<T
>
Get a Firestore document, unwrap the document into a plain object, and don't subscribe to changes
Name | Type |
---|---|
T |
unknown |
Name | Type |
---|---|
ref |
DocumentReference <T > |
options? |
ReactFireOptions <T > |
▸ useFirestoreDocOnce<T
>(ref
, options?
): ObservableStatus
<DocumentSnapshot
<T
>>
Get a firestore document and don't subscribe to changes
Name | Type |
---|---|
T |
DocumentData |
Name | Type |
---|---|
ref |
DocumentReference <T > |
options? |
ReactFireOptions <T > |
ObservableStatus
<DocumentSnapshot
<T
>>
▸ useFunctions(): Functions
Functions
▸ useIdTokenResult(user
, forceRefresh?
, options?
): ObservableStatus
<IdTokenResult
>
Name | Type | Default value |
---|---|---|
user |
User |
undefined |
forceRefresh |
boolean |
false |
options? |
ReactFireOptions <IdTokenResult > |
undefined |
ObservableStatus
<IdTokenResult
>
▸ useInitAnalytics(initializer
, options?
): ObservableStatus
<Analytics
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <Analytics > |
options? |
ReactFireOptions <Analytics > |
ObservableStatus
<Analytics
>
▸ useInitAppCheck(initializer
, options?
): ObservableStatus
<AppCheck
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <AppCheck > |
options? |
ReactFireOptions <AppCheck > |
ObservableStatus
<AppCheck
>
▸ useInitAuth(initializer
, options?
): ObservableStatus
<Auth
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <Auth > |
options? |
ReactFireOptions <Auth > |
ObservableStatus
<Auth
>
▸ useInitDatabase(initializer
, options?
): ObservableStatus
<Database
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <Database > |
options? |
ReactFireOptions <Database > |
ObservableStatus
<Database
>
▸ useInitFirestore(initializer
, options?
): ObservableStatus
<Firestore
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <Firestore > |
options? |
ReactFireOptions <Firestore > |
ObservableStatus
<Firestore
>
▸ useInitFunctions(initializer
, options?
): ObservableStatus
<Functions
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <Functions > |
options? |
ReactFireOptions <Functions > |
ObservableStatus
<Functions
>
▸ useInitPerformance(initializer
, options?
): ObservableStatus
<FirebasePerformance
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <FirebasePerformance > |
options? |
ReactFireOptions <FirebasePerformance > |
ObservableStatus
<FirebasePerformance
>
▸ useInitRemoteConfig(initializer
, options?
): ObservableStatus
<RemoteConfig
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <RemoteConfig > |
options? |
ReactFireOptions <RemoteConfig > |
ObservableStatus
<RemoteConfig
>
▸ useInitStorage(initializer
, options?
): ObservableStatus
<FirebaseStorage
>
Name | Type |
---|---|
initializer |
(firebaseApp : FirebaseApp ) => Promise <FirebaseStorage > |
options? |
ReactFireOptions <FirebaseStorage > |
ObservableStatus
<FirebaseStorage
>
▸ useIsSuspenseEnabled(): boolean
boolean
▸ useObservable<T
>(observableId
, source
, config?
): ObservableStatus
<T
>
Name | Type |
---|---|
T |
unknown |
Name | Type |
---|---|
observableId |
string |
source |
Observable <T > |
config |
ReactFireOptions <unknown > |
▸ usePerformance(): FirebasePerformance
FirebasePerformance
▸ useRemoteConfig(): RemoteConfig
RemoteConfig
▸ useRemoteConfigAll(key
): ObservableStatus
<AllParameters
>
Convience method similar to useRemoteConfigValue. Returns allRemote Config parameters.
Name | Type | Description |
---|---|---|
key |
string |
The parameter key in Remote Config |
ObservableStatus
<AllParameters
>
▸ useRemoteConfigBoolean(key
): ObservableStatus
<boolean
>
Convience method similar to useRemoteConfigValue. Returns a boolean
from a Remote Config parameter.
Name | Type | Description |
---|---|---|
key |
string |
The parameter key in Remote Config |
ObservableStatus
<boolean
>
▸ useRemoteConfigNumber(key
): ObservableStatus
<number
>
Convience method similar to useRemoteConfigValue. Returns a number
from a Remote Config parameter.
Name | Type | Description |
---|---|---|
key |
string |
The parameter key in Remote Config |
ObservableStatus
<number
>
▸ useRemoteConfigString(key
): ObservableStatus
<string
>
Convience method similar to useRemoteConfigValue. Returns a string
from a Remote Config parameter.
Name | Type | Description |
---|---|---|
key |
string |
The parameter key in Remote Config |
ObservableStatus
<string
>
▸ useRemoteConfigValue(key
): ObservableStatus
<RemoteConfigValue
>
Accepts a key and optionally a Remote Config instance. Returns a Remote Config Value.
Name | Type | Description |
---|---|---|
key |
string |
The parameter key in Remote Config |
ObservableStatus
<RemoteConfigValue
>
▸ useSigninCheck(options?
): 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 of a user as well.
// pass in an object describing the custom claims a user must have
const {status, data: signInCheckResult} = useSigninCheck({requiredClaims: {admin: true}});
// pass in a custom claims validator function
const {status, data: signInCheckResult} = useSigninCheck({validateCustomClaims: (userClaims) => {
// custom validation logic...
}});
// You can optionally force-refresh the token
const {status, data: signInCheckResult} = useSigninCheck({forceRefresh: true, requiredClaims: {admin: true}});
Name | Type |
---|---|
options? |
SignInCheckOptionsBasic | SignInCheckOptionsClaimsObject | SignInCheckOptionsClaimsValidator |
ObservableStatus
<SigninCheckResult
>
▸ useStorage(): FirebaseStorage
FirebaseStorage
▸ useStorageDownloadURL<T
>(ref
, options?
): ObservableStatus
<string
| T
>
Subscribe to a storage ref's download URL
Name | Type |
---|---|
T |
string |
Name | Type | Description |
---|---|---|
ref |
StorageReference |
reference to the blob you want to download |
options? |
ReactFireOptions <T > |
ObservableStatus
<string
| T
>
▸ useStorageTask<T
>(task
, ref
, options?
): ObservableStatus
<UploadTaskSnapshot
| T
>
Subscribe to the progress of a storage task
Name | Type |
---|---|
T |
unknown |
Name | Type | Description |
---|---|---|
task |
UploadTask |
the task you want to listen to |
ref |
StorageReference |
reference to the blob the task is acting on |
options? |
ReactFireOptions <T > |
ObservableStatus
<UploadTaskSnapshot
| T
>
▸ useSuspenseEnabledFromConfigAndContext(suspenseFromConfig?
): boolean
Name | Type |
---|---|
suspenseFromConfig? |
boolean |
boolean
▸ useUser<T
>(options?
): ObservableStatus
<User
| null
>
Subscribe to Firebase auth state changes, including token refresh
Name | Type |
---|---|
T |
unknown |
Name | Type |
---|---|
options? |
ReactFireOptions <T > |
ObservableStatus
<User
| null
>