reactfire

reactfire

Version 4.2.3
Published 9 months ago
606 kB
2 dependencies
MIT license

Install

npm i reactfire

yarn add reactfire

pnpm add reactfire

Overview

Firebase library for React

Index

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 instead
Conditionally 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 instead
Conditionally 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 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}});

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 of data will be the valuea provided in initialData **UNLESS** the underlying observable is ready, in which case it will skip initialData.

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 be true.

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. Check ObservableStatus.error for more details - success: The hook has emitted at least one value
If initialData is passed in, this will skip loading and go straight to success.

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 {}

property children

children: React.ReactNode;

property fallback

fallback: React.ReactNode;

property traceId

traceId: string;

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)

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 9 months ago.
Package analyzed in 4086 ms.
Missing or incorrect documentation? Open an issue for this package.

reactfire

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable AnalyticsSdkContext

variable AppCheckSdkContext

variable AuthSdkContext

variable DatabaseSdkContext

variable FirestoreSdkContext

variable FunctionsSdkContext

variable PerformanceSdkContext

variable RemoteConfigSdkContext

variable StorageSdkContext

variable useInitAnalytics

variable useInitAppCheck

variable useInitAuth

variable useInitDatabase

variable useInitFirestore

variable useInitFunctions

variable useInitPerformance

variable useInitRemoteConfig

variable useInitStorage

variable version

Functions

function AnalyticsProvider

function AppCheckProvider

function AuthCheck

Deprecated

function AuthProvider

function checkIdField

function checkinitialData

function checkOptions

function ClaimsCheck

Deprecated

function DatabaseProvider

function FirebaseAppProvider

function FirestoreProvider

function FunctionsProvider

function PerformanceProvider

function preloadFirestoreDoc

function preloadObservable

function preloadUser

function RemoteConfigProvider

function StorageImage

function StorageProvider

function SuspenseWithPerf

function useAnalytics

function useAppCheck

function useAuth

function useCallableFunctionResponse

Parameter functionName

Parameter options

function useDatabase

function useDatabaseList

Parameter ref

Parameter options

function useDatabaseListData

function useDatabaseObject

Parameter ref

Parameter options

function useDatabaseObjectData

function useFirebaseApp

function useFirestore

function useFirestoreCollection

function useFirestoreCollectionData

function useFirestoreDoc

function useFirestoreDocData

function useFirestoreDocDataOnce

function useFirestoreDocOnce

function useFunctions

function useIdTokenResult

function useIsSuspenseEnabled

function useObservable

function usePerformance