Table of Contents

• firebaseConnect
  • Parameters
  • Examples
  • Parameters

firebaseConnect

Extends React.Component

React Higher Order Component that automatically listens/unListens to Firebase Real Time Database on mount/unmount of the component. This uses React's Component Lifecycle hooks.

Parameters

• queriesConfig (Array | Function) Array of objects or strings for paths to sync from Firebase. Can also be a function that returns the array. The function is passed the current props and the firebase object. (optional, default [])

Examples

Basic

// props.firebase set on App component as firebase object with helpers
import { firebaseConnect } from 'react-redux-firebase'
export default firebaseConnect()(App)

Ordered Data

import React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { firebaseConnect } from 'react-redux-firebase'

const enhance = compose(
  firebaseConnect([
    'todos' // sync /todos from firebase into redux
  ]),
  connect((state) => ({
    todos: state.firebase.ordered.todos
  }))
)

function Todos({ todos }) {
  return (
    <div>
      {JSON.stringify(todos, null, 2)}
    </div>
  )
}

export default enhance(Todos)

Data that depends on props

import React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { get } from 'lodash'
import { firebaseConnect } from 'react-redux-firebase'

const enhance = compose(
  firebaseConnect((props) => ([
    `posts/${props.postId}` // sync /posts/postId from firebase into redux
  ])),
  connect((state, props) => ({
    post: get(state.firebase.data, `posts.${props.postId}`),
  }))
)

function Post({ post }) {
  return (
    <div>
     {JSON.stringify(post, null, 2)}
    </div>
  )
}

export default enhance(Post)

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

Render component wrapped in context

Parameters

• props object Component props

Returns React.Component Component wrapped in context