Reactfire

Hooks, Context Providers, and Components that make it easy to interact with Firebase.

By default, every reactfire hook throws a Promise until it has connected to Firebase, allowing you to use Suspense to render a fallback component. If you don't want reactfire to throw a promise, pass an initial value to a reactfire hook. It will emit the initial value right away instead of throwing a promise.

ToC

• Providers
  • FirebaseAppProvider
• Hooks
  • useFirebaseApp
  • Authentication
    • useUser
  • Database
    • Cloud Firestore
      • useFirestoreDoc
      • useFirestoreCollection
    • Realtime Database
      • useDatabaseObject
      • useDatabaseList
  • Cloud Storage
    • useStorageTask
    • useStorageDownloadURL
• Components
  • Performance Monitoring
    • SuspenseWithPerf
  • Authentication
    • AuthCheck

Providers

FirebaseAppProvider

Hooks

useFirebaseApp

useUser

useFirestoreDoc

useFirestoreCollection

useDatabaseObject

useDatabaseList

useStorageTask

useStorageDownloadURL

Components

SuspenseWithPerf

AuthCheck

AuthCheckProps

Property	Type
auth	Auth
children	React.Component
fallback	React.Component
requiredClaims	Object

SuspensePerfProps

Property	Type
children	React.Component
fallback	React.Component
firePerf	any
traceId	string

ReactFireOptions

Property	Type
startWithValue	any

Components

AuthCheck

Props

interface AuthCheckProps

Returns

React.FunctionComponent

SuspenseWithPerf

Props

interface SuspensePerfProps

Returns

React.FunctionComponent

Hooks

useDatabaseList

Subscribe to a Realtime Database list

Parameters

Parameter	Type
ref	Reference or Query
options ?	ReactFireOptions

Returns

QueryChange[]

useDatabaseObject

Subscribe to a Realtime Database object

Parameters

Parameter	Type
ref	Reference
options ?	ReactFireOptions

Returns

QueryChange

useFirestoreCollection

Subscribe to a Firestore collection

Parameters

Parameter	Type
ref	CollectionReference
options ?	ReactFireOptions

Returns

QuerySnapshot

useFirestoreDoc

Suscribe to Firestore Document changes

Parameters

Parameter	Type
ref	DocumentReference
options ?	ReactFireOptions

Returns

DocumentSnapshot

useStorageDownloadURL

Subscribe to a storage ref's download URL

Parameters

Parameter	Type
ref	Reference
options ?	ReactFireOptions

Returns

string

useStorageTask

Subscribe to the progress of a storage task

Parameters

Parameter	Type
task	UploadTask
ref	Reference
options ?	ReactFireOptions

Returns

UploadTaskSnapshot

useUser

Subscribe to Firebase auth state changes, including token refresh

Parameters

Parameter	Type
auth	Auth
options ?	ReactFireOptions

Returns

User

useObservable

Parameters

Parameter	Type
observable$	Observable
observableId	string
startWithValue ?	any

Returns

any

For development

1. yarn install
2. cd into the reactfire/reactfire directory. run yarn run watch.
3. In a new terminal, cd into the reactfire/sample-simple directory. run yarn start.
4. Head over to https://localhost:3000 to see the running sample

Testing

1. cd into the reactfire/reactfire directory
2. run yarn test