React bindings for Firebase.
npm install --save react-firebase
React Firebase requires React 0.14 and Firebase 3 or later.
import React from 'react'
import firebase from 'firebase'
import { connect } from 'react-firebase'
firebase.initializeApp({
databaseURL: 'https://react-firebase-sandbox.firebaseio.com'
})
const Counter = ({ value, setValue }) => (
<div>
<button onClick={() => setValue(value - 1)}>-</button>
<span>{value}</span>
<button onClick={() => setValue(value + 1)}>+</button>
</div>
)
export default connect((props, ref) => ({
value: 'counterValue',
setValue: value => ref('counterValue').set(value)
}))(Counter)
Connects a React component to a Firebase App reference.
It does not modify the component class passed to it. Instead, it returns a new, connected component class, for you to use.
-
[
mapFirebaseToProps(props, ref, firebaseApp): subscriptions
] (Object or Function): Its result, or the argument itself must be a plain object. Each value must either be a path to a location in your database, a query object or a function. If you omit it, the default implementation just passesfirebaseApp
as a prop to your component. -
[
mergeProps(ownProps, firebaseProps): props
] (Function): If specified, it is passed the parentprops
and current subscription state merged with the result ofmapFirebaseToProps()
. The plain object you return from it will be passed as props to the wrapped component. If you omit it,Object.assign({}, ownProps, firebaseProps)
is used by default.
A React component class that passes subscriptions and actions as props to your component according to the specified options.
Note: "actions" are any function values returned by
mapFirebaseToProps()
which are typically used to modify data in Firebase.
WrappedComponent
(Component): The original component class passed toconnect()
.
Note: The value of
todos
is the path to your data in Firebase. This is equivalent tofirebase.database().ref('todo')
.
const mapFirebaseToProps = {
todos: 'todos'
}
export default connect(mapFirebaseToProps)(TodoApp)
const mapFirebaseToProps = (props, ref) => ({
todos: 'todos',
addTodo: todo => ref('todos').push(todo)
})
export default connect(mapFirebaseToProps)(TodoApp)
Pass todos
, completedTodos
, a function that completes a todo (completeTodo
) and one that logs in as props
const mapFirebaseToProps = (props, ref, firebase) => ({
todos: 'todos',
completedTodos: {
path: 'todos',
orderByChild: 'completed',
equalTo: true
},
completeTodo = id => ref(`todos/${id}/completed`).set(true),
login: (email, password) => firebase.auth().signInWithEmailAndPassword(email, password)
})
export default connect(mapFirebaseToProps)(TodoApp)
By default connect()
will use the default Firebase App. If you have multiple Firebase App references in your application you may use this to specify the Firebase App reference available to connect()
calls in the component hierarchy below.
If you really need to, you can manually pass firebaseApp
as a prop to every connect()
ed component, but we only recommend to do this for stubbing firebaseApp
in unit tests, or in non-fully-React codebases. Normally, you should just use <Provider>
.
firebaseApp
(App): A Firebase App reference.children
(ReactElement): The root of your component hierarchy.
import { Provider } from 'react-firebase'
import { initializeApp } from 'firebase'
const firebaseApp = initializeApp({
databaseURL: 'https://my-firebase.firebaseio.com'
})
ReactDOM.render(
<Provider firebaseApp={firebaseApp}>
<MyRootComponent />
</Provider>,
rootEl
)
MIT
react-redux
which this library is heavily inspired by.