Reactfire
Hooks that make it easy
to interact with Firestore, Realtime Database, Authentication, and
Storage. Note, every reactfire hook throws a Promise until it has
connected to Firebase. Wrap your components in React's
Suspense,
or, if you don't want to deal with Suspense, pass an
initial value to a reactfire hook.
Example.
Interfaces
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
yarn installcdinto the reactfire/reactfire directory. runyarn run watch.- In a new terminal,
cdinto the reactfire/sample-simple directory. runyarn start. - Head over to https://localhost:3000 to see the running sample
Testing
cdinto the reactfire/reactfire directory- run
yarn test