withFirebase.md

Table of Contents

• createWithFirebase
• withFirebase

createWithFirebase

Function that creates a Higher Order Component that which provides firebase and dispatch as a props to React Components.

WARNING!! This is an advanced feature, and should only be used when needing to access a firebase instance created under a different store key.

Parameters

• storeKey String Name of redux store which contains Firebase state (state.firebase) (optional, default 'store')

Examples

Basic

// this.props.firebase set on App component as firebase object with helpers
import { createWithFirebase } from 'react-redux-firebase'

// create withFirebase that uses another redux store
const withFirebase = createWithFirebase('anotherStore')

// use the withFirebase to wrap a component
export default withFirebase(SomeComponent)

Returns Function Higher Order Component which accepts an array of watchers config and wraps a React Component

withFirebase

Extends React.Component

Higher Order Component that provides firebase and dispatch as a props to React Components. Firebase is gathered from store.firebase, which is attached to store by the store enhancer (reactReduxFirebase) during setup. NOTE: This version of the Firebase library has extra methods, config, and functionality which give it it's capabilities such as dispatching actions.

Examples

Basic

import { withFirebase } from 'react-redux-firebase'

const AddData = ({ firebase: { push } }) =>
  <div>
    <button onClick={() => push('todos', { done: false, text: 'Sample' })}>
      Add Sample Todo
    </button>
  </div>

export default withFirebase(AddData)

Within HOC Composition

import { compose } from 'redux' // can also come from recompose
import { withHandlers } from 'recompose'
import { withFirebase } from 'react-redux-firebase'

const AddTodo = ({ addTodo }) =>
  <div>
    <button onClick={addTodo}>
      Add Sample Todo
    </button>
  </div>

export default compose(
  withFirebase(AddTodo),
  withHandlers({
    addTodo: props => () =>
       props.firestore.add(
         { collection: 'todos' },
         { done: false, text: 'Sample' }
       )
  })
)

Returns Function Which accepts a component to wrap and returns the wrapped component