Neutral, Plus or Minus

    fireview

    0.0.8 • Public • Published

    Fireview

    A quick helper to map data in Firebase to React views. Supports Cloud Firestore.

    Requires React 16, since the <Map> component renders an array.

    Example

    This very repo is an example of how to use Fireview:

    In an ideal world, our views wouldn't care about what DB they're rendering. And, indeed, the views are almost identical. A future version of Fireview will likely change the API to allow them to be entirely identical.

    Here's our message component:

      // Message.jsx
      // from and body are fields in the database.
      // _ref is the reference we're rendering. We can use this
      // to mutate the database.
      const Message = ({from, body, _ref}) =>
        <li>
          <strong>{from}:</strong> {body}
          <a onClick={() => _ref.set(null)}>⛔️</a>  { /* Delete this message */ }
        </li>

    We're going to map a collection of messages to it.

    Whether you're using Firestore or the legacy Realtime database, <Map> listens to the reference you provide and updates the view when the database changes.

    With Cloud Firestore

      // Messages-Firestore.jsx
      import {Map} from 'fireview'
    
      export default () => 
        <ul>
          <Map from={
              // In a real app, you'd probably take in this reference
              // as a prop.
    
              // from accepts any Firestore query.
              firebase.firestore()
                .collection('messages')
            }
            // Loading takes a component that is displayed while
            // the first snapshot is loading.
            Loading={() => 'Loading...'}
    
            // Render takes a component that renders each document in
            // the returned query
            Render={Message}
    
            // Empty takes a component displayed if the collection is empty.
            Empty={() => 'No messages here.'}
          />
        </ul>

    <Map> renders your Render component once for each Document in the query you provide it (so if your query references a single Document, you only get that one.)

    With the Realtime Database

    Using the Realtime DB is very similar. One difference is that you need to give <Map> an each prop if you want your Render component to be mounted once per each child (rather than once for the entire path).

    (This is because the Realtime Database doesn't distinguish between "Documents" and regular values.)

      // Messages-Realtime.jsx 
      import {Map} from 'fireview'
    
      export default () =>
        <ul>      
          <Map each from={firebase.database().ref('/chatrooms/welcome')}
            // ⬆️ "each" means we'll map over all children of this path
            // Everything else behaves the same.
            Loading={() => 'Loading...'}
            Render={Message}
            Empty={() => 'No messages here.'}
          />
        </ul>

    Using AuthProvider

    You tend to need information about the currently logged in user in various places around your app.

    <AuthProvider> provides auth information.

    withAuth is a HOC that takes this auth information and adds a withAuth prop to the component it wraps. This prop has the shape:

    {
      // The current user
      user: firebase.auth.User,
      
      // The firebase Auth interface
      auth: firebase.auth.Auth,
    
      // True once the auth state has resolved (once
      // onAuthStateChanged has emitted at least once).
      ready: bool,
    }

    (Note: the HOC also adds _user, _auth, and _authReady props, but these are uglier and will be removed in the future. Use the nested object instead.)

    import * as firebase from 'firebase'
    
    import {AuthProvider, withAuth} from 'fireview'
    
    export default () =>
      <AuthProvider auth={firebase.auth()}>
        {/* ShowUid is a direct child here, but it doesn't have to be. */}
        <ShowUid />
      </AuthProvider>
    
    const ShowUid = withAuth(
      ({withAuth: {user, auth}}) =>
        user
          ? user.uid
          : <a onClick={() => auth.signInAnonymously()}>
              Sign in
            </a>
    )

    Keywords

    none

    Install

    npm i fireview

    DownloadsWeekly Downloads

    1

    Version

    0.0.8

    License

    ISC

    Unpacked Size

    38.6 kB

    Total Files

    16

    Last publish

    Collaborators

    • queerviolet