Table of Contents
withFirebase
Parameters
WrappedComponent
React.Component React component to wrap
Examples
Basic
import React from 'react'
import { withFirebase } from 'react-redux-firebase'
function AddTodo({ firebase: { push } }) {
return (
<div>
<button onClick={() => push('todos', { done: false, text: 'Sample' })}>
Add Sample Todo
</button>
</div>
)
}
export default withFirebase(AddTodo)
Within HOC Composition
import React from 'react'
import { compose } from 'redux' // can also come from recompose
import { withHandlers } from 'recompose'
import { withFirebase } from 'react-redux-firebase'
function AddTodo({ addTodo }) {
return (
<div>
<button onClick={addTodo}>
Add Sample Todo
</button>
</div>
)
}
const enhance = compose(
withFirebase,
withHandlers({
addTodo: props => () =>
props.firestore.add(
{ collection: 'todos' },
{ done: false, text: 'Sample' }
)
})
)
export default enhance(AddTodo)
Returns Function Which accepts a component to wrap and returns the wrapped component
WithFirebase
WithFirebase wrapper component
Parameters
props
object Component props
Returns React.Component WrappedComponent wrapped with firebase context