firebased
Redux-inspired higher order component for Firebase and React
Installation
npm install --save firebasedUsage
Top Level
import React, { Component } from 'react';
import { FirebaseProvider } from 'firebased';
class TopLevelComponent extends Component ({
render() {
return (
<FirebaseProvider config={{
apiKey: '<your-api-key>',
authDomain: '<your-auth-domain>',
databaseURL: '<your-database-url>',
storageBucket: '<your-storage-bucket>'
}}>
{ /* App-Specific components here */ }
</FirebaseProvider>
}}>Components with static firebased arguments
import React, { Component } from 'react';
import { firebased } from 'firebased';
@firebased({ items: 'items' })
class MyComponent extends Component {
render() {
// this.props.items will contain the value provided by Firebase at ref 'items'
const list = this.props.items.map(n => <li>{n}</li>);
return (
<ul>
{ list }
</ul>
);
}
}Components with dynamic firebased arguments
import React, { Component } from 'react';
import { firebased } from 'firebased';
@firebased(props => ({ user: `users/${props.userId}` }))
class MyComponent extends Component {
render() {
// If this.props.userId were to equal 12345, this.props.user will
// contain the value provided by Firebase at ref 'users/12345'.
const user = this.props.user;
return (
<h1>Hello, { user.name }!</h1>
);
}
}Additional Props
In addition to the above, for each named prop above (i.e. items, user), each
component would also receive firebase ref's as itemsRef and userRef, respectively.
Also, every @firebased component also is passed firebase as a prop named firebase.
License
MIT
