ReactJS is a framework for building large, complex user
interfaces. Firebase complements it perfectly
by providing an easy-to-use, realtime data source for populating the state of React components.
With ReactFire, it only takes a few lines of JavaScript to integrate Firebase into React apps via
the ReactFireMixin.
Read our blog post on using Firebase with React and check out our live Todo app demo to get started!
In order to use the ReactFireMixin in your project, you need to include the following files in your HTML:
<!-- React JS -->
<script src="http://fb.me/react-0.10.0.min.js"></script>
<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/1.0.21/firebase.js"></script>
<!-- ReactFire -->
<script src="https://cdn.firebase.com/libs/reactfire/0.1.6/reactfire.min.js"></script>Use the URL above to download both the minified and non-minified versions of ReactFire from the Firebase CDN. You can also download them from the releases page of this GitHub repository. Firebase and React can be downloaded directly from their respective websites.
You can also install ReactFire via npm or Bower and its dependencies will be downloaded automatically:
$ npm install reactfire --save$ bower install reactfire --saveReactFire requires Firebase in order to store data. You can sign up here for a free account.
To use the ReactFireMixin in a React component, add it to the component's mixins property:
var ExampleComponent = React.createClass({
mixins: [ReactFireMixin],
...
});The following APIs will then be available from the this object inside of ExampleComponent.
Creates a binding between Firebase and the inputted bind variable as an array. The Firebase
reference will be stored in this.firebaseRefs[bindVar].
var firebaseRef = new Firebase("https://<YOUR_FIREBASE>/");
this.bindAsArray(firebaseRef, "items");Additional options can be given:
once:trueto invoke.once(),falsefor.on()type: either 'state' or 'props', to bind to (Props will not bind with .on(), for it is bad practice. props will only work when once is true )eventType: must be valid Firebase eventType string: 'value', 'child_added', 'child_changed', 'child_removed', or 'child_moved'
var firebaseRef = new Firebase("https://<FB_PATH>/");
this.bindAsArray(firebaseRef, "items" [ true, 'props', 'child_removed' ]); // note: it is not allowed set `once` to false on `props`Creates a binding between Firebase and the inputted bind variable as an object. The Firebase
reference will be stored in this.firebaseRefs[bindVar].
var firebaseRef = new Firebase("https://<YOUR_FIREBASE>/");
this.bindAsObject(firebaseRef, "items");Removes the binding between Firebase and the inputted bind variable. This removes the stored
Firebase reference in this.firebaseRefs[bindVar] and cleans up any event handlers associated
with that Firebase reference.
this.unbind("items");Creates a 'child_added' binding between Firebase and the inputted bind variable as an Object if asArray not specified, as an Array if asArray is true.
this.bindOnAdded( new Firebase('https://<FB_PATH>/'), 'items'); // bind as Object
this.bindOnAdded( new Firebase('https://<FB_PATH>/'), 'items', true); // bind as ArrayCreates a 'child_removed' binding between Firebase and the inputted bind variable as an Object (if asArray not specified). Binds as an Array if asArray is true.
this.bindOnRemoved( new Firebase('https://<FB_PATH>/'), 'items');Creates a 'child_changed' binding between Firebase and the inputted bind variable as an Object (if asArray not specified). Binds as an Array if asArray is true.
this.bindOnChanged( new Firebase('https://<FB_PATH>/'), 'items');Creates a 'child_moved' binding between Firebase and the inputted bind variable as an Object (if asArray not specified). Binds as an Array if asArray is true.
this.bindOnMoved( new Firebase('https://<FB_PATH>/'), 'items');Creates a one-time exchange between Firebase and the inputted bind variable as an Array. Defaults to type 'state' and eventType 'value'
this.onceAsArray( new Firebase('https://<FB_PATH>/'), 'items', [ 'props', 'child_removed' ] );Creates a one-time exchange between Firebase and the inputted bind variable as an Object. Defaults to type 'state' and eventType 'value'
this.onceAsObject( new Firebase('https://<FB_PATH>/'), 'items', [ 'props', 'child_removed' ] );Creates a one-time props exchange between Firebase and the inputted bind variable as an Array. Defaults to eventType 'value'
this.propAsArray( new Firebase('https://<FB_PATH>/'), 'items', [ 'child_removed' ] );Creates a one-time props exchange between Firebase and the inputted bind variable as an Array. Defaults to eventType 'value'
this.propAsObject( new Firebase('https://<FB_PATH>/'), 'items', [ 'child_removed' ] );If you'd like to contribute to ReactFire, you'll need to run the following commands to get your environment set up:
$ git clone https://github.com/firebase/reactfire.git
$ cd reactfire # go to the reactfire directory
$ npm install -g gulp # globally install gulp task runner
$ npm install -g bower # globally install Bower package manager
$ npm install # install local npm build / test dependencies
$ bower install # install local JavaScript dependencies
$ gulp watch # watch for source file changesgulp watch will watch for changes in the /src/ directory and lint, concatenate, and minify the
source files when a change occurs. The output files - reactfire.js and reactfire.min.js - are
written to the /dist/ directory.
You can run the test suite by navigating to file:///path/to/reactfire/tests/index.html or via the
command line using gulp test.