Table of Contents

withFirestore

Extends React.Component

Higher Order Component that attaches firestore, firebase and dispatch as props to React Components. Firebase instance is gathered from store.firestore, which is attached to store by the store enhancer (reduxFirestore) during setup of redux-firestore

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

results matching ""

    No results matching ""