Table of Contents

• withFirestore
  • Parameters
  • Examples
• WithFirestore
  • Parameters

withFirestore

Extends React.Component

Higher Order Component that attaches firestore, firebase and dispatch as props to React Components.

Parameters

• WrappedComponent React.Component React component to wrap

Examples

Basic

import React from 'react'
import { withFirestore } from 'react-redux-firebase'

function AddTodo({ firestore: { add } }) {
  return (
    <div>
      <button onClick={() => add('todos', { done: false, text: 'Sample' })}>
        Add Sample Todo
      </button>
    </div>
  )
}

export default withFirestore(AddTodo)

Within HOC Composition

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

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

const enhance = compose(
  withFirestore,
  withHandlers({
    addTodo: props => () => {
      const newTodo = { done: false, text: 'Sample' }
      return props.firestore.add({ collection: 'todos' }, newTodo)
    }
  })
)

export default enhance(AddTodo)

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

WithFirestore

WithFirebase wrapper component

Parameters

• props object Component props

Returns React.Component WrappedComponent wrapped with firebase context