Skip to content

tiberiuc/redux-react-firebase

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

redux-react-firebase

Use Firebase with React and Redux in ES6

Features

  • Suport for Firebase v3 (for older Firebase version use Branch 1.x)
  • Integrated into redux
  • Support small data ( using value ) or large datasets ( using child_added, child_removed, child_changed
  • queries support ( orderByChild, orderByKey, orderByValue, orderByPriority, limitToLast, limitToFirst, startAt, endAt, equalTo right now )
  • Automatic binding/unbinding
  • Declarative decorator syntax for React components
  • Support for nested props
  • Out of the box support for authentication (with auto load user profile)
  • Lots of helper functions

Install

$ npm install --save redux-react-firebase

Use

Include redux-react-firebase in your store

import {createStore, combineReducers, compose} from 'redux'
import {reduxReactFirebase, firebaseStateReducer} from 'redux-react-firebase'

const rootReducer = combineReducers({
  firebase: firebaseStateReducer
})
const config = {
  apiKey: '<your-api-key>',
  authDomain: '<your-auth-domain>',
  databaseURL: '<your-database-url>',
  storageBucket: '<your-storage-bucket>'
}
const createStoreWithFirebase = compose(
    reduxReactFirebase(config),
)(createStore)


store = createStoreWithFirebase(rootReducer, initialState)

In the components

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
import {firebase, helpers} from 'redux-react-firebase'

const {isLoaded, isEmpty, dataToJS} = helpers

@firebase( [
  'todos'
])
@connect(
  ({firebase}) => ({
    todos: dataToJS(firebase, 'todos'),
  })
)
class Todos extends Component {

  render() {
    const {firebase, todos} = this.props;


    const todosList = (!isLoaded(todos)) ?
                          'Loading'
                        : (isEmpty(todos) ) ?
                              'Todo list is empty'
                            : _.map(todos, (todo, id) => (<TodoItem key={id} id={id} todo={todo}/>) )

    return (
      <div>
        <h1>Todos</h1>
        <ul>
          {todosList}
        </ul>
        <input type="text" ref="newTodo" />
        <button onClick={handleAdd}>Add</button>
      </div>
    )
  }

}

API

See API

Example

You can see a complete example here

Tests

Mocha.js is used as test runner. To run the tests, run

npm run test

Contributors