react-admin-firebase
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
- Firebase Authenticated Login (email, password)
- Dynamic caching of resources
- All methods implemented;
(GET, POST, GET_LIST ect...)
- Filtering, sorting etc...
- Realtime updates, using ra-realtime
- Implicitly watches all GET_LIST routes using observables with the firebase sdk
- Optional watch collection array or dontwatch collection array
Get Started
yarn add react-admin-firebase
or
npm install --save react-admin-firebase
Demo 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
Code
;;;;const config =apiKey: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"authDomain: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"databaseURL: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"projectId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"storageBucket: "aaaaaaaaaaaaaaaaaaaaaaaaaaa"messagingSenderId: "aaaaaaaaaaaaaaaaaaaaaaaaaaa";const dataProvider = ;Componentpublic {return<AdmindataProvider=dataProvider><Resource name="posts" list=PostList show=PostShow create=PostCreate edit=PostEdit/></Admin>;};
(Optional) Realtime Updates!
Get realtime updates from the firebase server instantly on your tables, with minimal overheads, using rxjs observables!
...;...const dataProvider = ;const firebaseRealtime = ;Componentpublic {return<AdmindataProvider=dataProvidercustomSagas=firebaseRealtime><Resource name="posts" list=PostList show=PostShow create=PostCreate edit=PostEdit/></Admin>;};
(Optional) Realtime Options
Trigger realtime on only some routes using the options object.
...const dataProvider = ;const options =watch: 'posts' 'comments'dontwatch: 'users'const firebaseRealtime = ;...