npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2021 – Pkg Stats / Ryan Hefner

react-admin-firebase

v3.2.20

Published

A firebase data provider for the React Admin framework

Downloads

4,791

Readme

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] Login with: Google, Facebook, Github etc... (Example Here)
  • [x] Forgot password button... (Example Here)
  • [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] 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 <FileInput /> field
  • [ ] Realtime updates, using ra-realtime
    • Optional watch collection array or dontwatch collection array

Get Started

yarn add react-admin-firebase firebase

or

npm install --save react-admin-firebase 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' | () => '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'],
  // Authentication persistence, defaults to 'session', options are 'session' | 'local' | 'none'
  persistence: 'session',
  // Disable the metadata; 'createdate', 'lastupdate', 'createdby', 'updatedby'
  disableMeta: false,
  // Have custom metadata field names instead of: 'createdate', 'lastupdate', 'createdby', 'updatedby'
  renameMetaFields: {
    created_at: 'my_created_at', // default: 'createdate'
    created_by: 'my_created_by', // default: 'createdby'
    updated_at: 'my_updated_at', // default: 'lastupdate'
    updated_by: 'my_updated_by', // default: 'updatedby'
  },
  // Prevents document from getting the ID field added as a property
  dontAddIdFieldToDoc: false,
  // Adds 'deleted' meta field for non-destructive deleting functionality
  // NOTE: Hides 'deleted' records from list views unless overridden by filtering for {deleted: true} 
  softDelete: false,
  // Changes meta fields like 'createdby' and 'updatedby' to store user IDs instead of email addresses
  associateUsersById: false,
  // Casing for meta fields like 'createdby' and 'updatedby', defaults to 'lower', options are 'lower' | 'camel' | 'snake' | 'pascal' | 'kebab'
  metaFieldCasing: 'lower',
  // Instead of saving full download url for file, save just relative path and then get download url
  // when getting docs - main use case is handling multiple firebase projects (environments)
  // and moving/copying documents/storage files between them - with relativeFilePaths, download url
  // always point to project own storage
  relativeFilePaths: false, 
  // Add file name to storage path, when set to true the file name is included in the path
  useFileNamesInStorage: false 
  // Use firebase sdk queries for pagination, filtering and sorting
  lazyLoading: {
    enabled: false
  },
  // Logging of all reads performed by app (additional feature, for lazy-loading testing)
  firestoreCostsLogger: {
    enabled: false,
    localStoragePrefix // optional
  }
}

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

Also checkout how to login with: Google, Facebook, Github etc... (Example Here)

And you might want a "Forgot password" button... (Example Here)

Note

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

Realtime Updates!

NOTE: Realtime updates were removed in react-admin v3.x (see https://github.com/marmelab/react-admin/pull/3908). As such, react-admin-firebase v3.x also does not support Realtime Updates. However, much of the original code used for this functionalaity in react-admin v2.x remains - including the documentation below. For updates on the implementation of realtime please follow these issues:

  • https://github.com/benwinding/react-admin-firebase/issues/49
  • https://github.com/benwinding/react-admin-firebase/issues/57

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
  3. yarn start-demo

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

Run tests

To run the tests, either watch for changes or just run all tests.

  • yarn test-watch
  • yarn test

paypal