Nerfed Poet Melancholia

    @elreyb/react-admin-firebase
    TypeScript icon, indicating that this package has built-in type declarations

    0.8.9 • Public • Published

    react-admin-firebase

    NPM Version License Downloads/week Github Issues

    A firebase data provider for the React-Admin framework. It maps collections from the Firebase database (Firestore) to your react-admin application. It's an npm package!

    Features

    • [x] Firestore Dataprovider (details below)
    • [x] Firebase AuthProvider (email, password)
    • [x] Firebase storage upload functionality

    Pull requests welcome!!

    Firestore Dataprovider Features

    • [x] Dynamic caching of resources
    • [x] All methods implemented; (GET, POST, GET_LIST ect...)
    • [x] Filtering, sorting etc...
    • [x] Realtime updates, using ra-realtime
      • Optional watch collection array or dontwatch collection array
    • [x] Ability to manage sub collections through app configuration
    • [x] Ability to use externally initialized firebaseApp instance
    • [x] Override firestore random id by using "id" as a field in the Create part of the resource
    • [x] Upload to the firebase storage bucket using the standard field

    Get Started

    yarn add react-admin-firebase

    or

    npm install --save react-admin-firebase

    Demos Basic

    A simple example based on the React Admin Tutorial.

    Prerequisits

    • Create a posts collection in the firebase firestore database
    • Get config credentials using the dashboard

    Options

    import {
      FirebaseAuthProvider,
      FirebaseDataProvider,
      FirebaseRealTimeSaga
    } from 'react-admin-firebase';
    
    const config = {
      apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
    };
    
    // All options are optional
    const options = {
      // Use a different root document to set your resource collections, by default it uses the root collections of firestore
      rootRef: 'root-collection/some-doc';
      // Your own, previously initialized firebase app instance
      app: firebaseAppInstance;
      // Enable logging of react-admin-firebase
      logging: true;
      // Resources to watch for realtime updates, will implicitly watch all resources by default, if not set.
      watch: ['posts'];
      // Resources you explicitly dont want realtime updates for
      dontwatch: ['comments'];
    }
    
    const dataProvider = FirebaseDataProvider(config, options);
    const authProvider = FirebaseAuthProvider(config, options);
    const firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);

    Data Provider

    import * as React from 'react';
    import { Admin, Resource } from 'react-admin';
    
    import { PostList, PostShow, PostCreate, PostEdit } from "./posts";
    import {
      FirebaseAuthProvider,
      FirebaseDataProvider,
      FirebaseRealTimeSaga
    } from 'react-admin-firebase';
    
    const config = {
      apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
      messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa",
    };
    
    const options = {};
    
    const dataProvider = FirebaseDataProvider(config, options);
    ...
          <Admin 
            dataProvider={dataProvider} 
          >
            <Resource name="posts" list={PostList} show={PostShow} create={PostCreate} edit={PostEdit}/>
          </Admin>
    ...

    Auth Provider

    Using the FirebaseAuthProvider you can allow authentication in the application.

    const dataProvider = FirebaseDataProvider(config);
    const authProvider = FirebaseAuthProvider(config);
    ...
          <Admin 
            dataProvider={dataProvider}
            authProvider={authProvider}
          >
    ...

    Note

    To get the currently logged in user run const user = await authProvider('AUTH_GETCURRENT'), this will return the firebase user object, or null if there is no currently logged in user.

    Realtime Updates!

    Get realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!

    ...
    import {
      FirebaseRealTimeSaga,
      FirebaseDataProvider
    } from 'react-admin-firebase';
    ...
    const dataProvider = FirebaseDataProvider(config);
    const firebaseRealtime = FirebaseRealTimeSaga(dataProvider);
    ...
          <Admin 
            dataProvider={dataProvider} 
            customSagas={[firebaseRealtime]}
          >
    ...

    Realtime Options

    Trigger realtime on only some routes using the options object.

    ...
    const dataProvider = FirebaseDataProvider(config);
    const options = {
      watch: ['posts', 'comments'],
      dontwatch: ['users']
    }
    const firebaseRealtime = FirebaseRealTimeSaga(dataProvider, options);
    ...

    Help Develop react-admin-firebase?

    1. git clone https://github.com/benwinding/react-admin-firebase
    2. yarn && yarn watch
    3. (open another terminal)
    4. cd src-demo && yarn && yarn start

    Now all local changes in the library source code can be tested immediately in the demo app.

    paypal

    Keywords

    none

    Install

    npm i @elreyb/react-admin-firebase

    DownloadsWeekly Downloads

    1

    Version

    0.8.9

    License

    MIT

    Unpacked Size

    283 kB

    Total Files

    38

    Last publish

    Collaborators

    • elreyb