firebased

Redux-inspired higher order component for Firebase and React

Installation

npm install --save firebased

Usage

Top Level

importReact,{Component}from'react';import{FirebaseProvider}from'firebased';classTopLevelComponentextendsComponent({render(){return(<FirebaseProviderconfig={{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

importReact,{Component}from'react';import{firebased}from'firebased';
@firebased({items: 'items'})classMyComponentextendsComponent{render(){// this.props.items will contain the value provided by Firebase at ref 'items'constlist=this.props.items.map(n=><li>{n}</li>);return(<ul>{list}</ul>);}}

Components with dynamic firebased arguments

importReact,{Component}from'react';import{firebased}from'firebased';
@firebased(props=>({user: `users/${props.userId}`}))classMyComponentextendsComponent{render(){// If this.props.userId were to equal 12345, this.props.user will// contain the value provided by Firebase at ref 'users/12345'.constuser=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