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

Functions

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 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)

                                                                                                                                                                                Dev Dependencies (34)

                                                                                                                                                                                Peer Dependencies (2)

                                                                                                                                                                                Badge

                                                                                                                                                                                To add a badge like this onejsDocs.io badgeto 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>