react-firestarter

Firebase Components for React

Install

npm install --save react-firestarter

Usage

Authentication

import React from 'react';

import { AuthProvider, Authenticator } from 'react-firestarter';

function Auth() {
  return (
    <AuthProvider fireauth={firebase.auth()}>
      <Authenticator onSuccess={onSuccess} onError={onError}>
        {({ isAuthenticated, signup, login, logout }) => {
          if (isAuthenticated) {
            return <button onClick={logout}>Logout</button>;
          } else {
            return (
              <div>
                <button onClick={signup}>Signup</button>
                <button onClick={login}>Login</button>
              </div>
            );
          }
        }}
      </Authenticator>
    </AuthProvider>
  );
}

Firestore

import React from 'react';

import { FirestoreProvider, Collection, Document } from 'react-firestarter';

function Firestore() {
  return (
    <FirestoreProvider firestore={firebase.firestore()}>
      <Collection name="todos">
        {({ isLoading, todos })} => {
          if (isLoading) {
            return <div>Loading</div>;
          } else {
            (
              todos.map(todo => {
                const { id, text } = todo;

                return (
                  <Document key={id} id={id} collection="todos">
                    {({ remove })} => {
                      <div>
                        <span>{text}</span>
                        <span>
                          <button onClick={remove}>X</button>
                        </span>
                      </div>
                    }
                  </Document>
                );
              });
            )
          }
        }
      </Collection>
    </FirestoreProvider>
  );
}

Render Methods and Props

AuthProvider

| Name | Type | Default | Description | | ------------- | :----: | :------: | ------------------------------------------------------------------------------------- | | fireauth | object | required | your own initialized firebase authentication module | | verifyByEmail | bool | true | if true, users will be required to verify their identity through an email upon signup |

Authenticator

| Name | Type | Default | Description | | --------- | :--: | :-----: | ------------------------------------------------ | | onSuccess | func | | callback for successful login or signup | | onError | func | | callback for failed login or signup |

An instantiated Authenticator will receive the following:

| Name | Type | Description | | ------------------ | :--: | -------------------------------------------------------------------------------------------------------- | | isAuthenticated | bool | lets us know if we have an authenticated user | | isAuthenticating | bool | lets us know if a user is in the process of authenticating | | redirectToReferrer | bool | useful for redirecting an authenticated user to original route they landed upon | | getCurrentUser | func | returns our authenticated user | | signup | func | signs a user up; will send a verification email unless verifyByEmail is set to false in AuthProvider; takes two arguments - the first is the user to signup, and the second is a context argument which will be returned to the callback method | | login | func | logs a user in; will not succeed if the user has not and should verify their identity via email; takes two arguments - the first is the user to login, and the second is a context argument which will be returned to the callback method | | logout | func | logs a user out |

FirestoreProvider

| Name | Type | Default | Description | | --------- | :----: | :------: | ---------------------------------------------- | | firestore | object | required | your own initialized firebase firestore module |

Collection

| Name | Type | Default | Description | | -------- | :----: | :------: | ----------------------------------------------------------------------------------------------- | | name | string | required | name of the firestore collection | | onError | func | | callback for successful fetch of collection | | realtime | bool | true | listen for realtime snapshot updates |

An instantiated Collection will receive the following:

| Name | Type | Description | | ------------------ | :---: | --------------------------------------------------------------------------------------------------------------------------------------------- | | isLoading | bool | lets us know if our document collection is in the process of loading | | [collectionName] | array | collection of documents; contains an id and the result of doc.data(); the prop name is the same as the name prop passed into Collection |

Document

| Name | Type | Default | Description | | ---------- | :----: | :------: | ----------------------------------------------------------------------------------------- | | collection | string | required | name of the firestore collection the document belongs to | | id | any | | id of the document; required for all methods except add | | onSuccess | func | | callback for successful execution of add, remove, update | | onError | func | | callback for failed execution of add, remove, update, and non-realtime fetch | | realtime | bool | false | listen for realtime snapshot updates | | fetch | bool | false | get a document or listen for realtime snapshot updates |

An instantiated Document will receive the following:

| Name | Type | Description | | --------- | :----: | ------------------------------------------------------------- | | add | func | adds a document; takes two arguments - the first is the item to add, and the second is a context argument which will be returned to the callback method | | remove | func | removes a document; takes one argument - a context which will be returned to the callback method | | update | func | updates a document; takes two arguments - the first is the date to update, and the second is a context argument which will be returned to the callback method | | doc | object | a single document object; contains the result of doc.data() | | isLoading | bool | lets us know if our document is in the process of loading |

License

MIT © jmpolitzer