react-admin-firebase-wow
A fork from firebase data provider for the React-Admin framework. It maps collections from the Firebase database (Firestore) to your react-admin application.
Get Started
yarn add react-admin-firebase
or
npm install --save react-admin-firebase
Prerequisits
- Create a
postscollection 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);
...