Skip to content

Commit 82cec8b

Browse files
author
Simen Brekken
committed
Avoid using inject which might be confusing
1 parent 352837d commit 82cec8b

File tree

1 file changed

+29
-5
lines changed

1 file changed

+29
-5
lines changed

README.md

Lines changed: 29 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,30 @@ React Firebase
33

44
React bindings for [Firebase](https://firebase.google.com).
55

6+
## Quick Start
7+
8+
```
9+
import firebase from 'firebase'
10+
import { connect } from 'react-firebase'
11+
12+
firebase.initializeApp({
13+
databaseURL: 'https://react-firebase-sandbox.firebaseio.com'
14+
})
15+
16+
const Counter = ({ value, setValue }) => (
17+
<div>
18+
<button onClick={() => setCount(value - 1)}>-</button>
19+
<span>{value}</span>
20+
<button onClick={() => setCount(value + 1)}>+</button>
21+
</div>
22+
)
23+
24+
export default connect((props, ref) => ({
25+
value: 'counterValue',
26+
setValue: value => ref('counterValue').set(value)
27+
}))(TodosApp)
28+
```
29+
630
## Installation
731

832
React Firebase requires **React 0.14 and Firebase 3 or later.**
@@ -21,11 +45,11 @@ It does not modify the component class passed to it. Instead, it *returns* a new
2145

2246
#### Arguments
2347

24-
* [`mapFirebaseToProps(props, ref, firebaseApp): subscriptions`] \(*Object or Function*): Its result, or the argument itself must be a plain object. Each value must either be a path to a location in your database, a query object or a function. If you omit it, the default implementation just injects `firebaseApp` into your component’s props.
48+
* [`mapFirebaseToProps(props, ref, firebaseApp): subscriptions`] \(*Object or Function*): Its result, or the argument itself must be a plain object. Each value must either be a path to a location in your database, a query object or a function. If you omit it, the default implementation just passes `firebaseApp` as a prop to your component.
2549

2650
#### Returns
2751

28-
A React component class that injects subscriptions and actions into your component according to the specified options.
52+
A React component class that passes subscriptions and actions as props to your component according to the specified options.
2953

3054
##### Static Properties
3155

@@ -35,7 +59,7 @@ A React component class that injects subscriptions and actions into your compone
3559

3660
> Runnable examples can be found in the [examples folder](examples/).
3761
38-
##### Inject `todos`
62+
##### Pass `todos` as a prop
3963

4064
> Note: The value of `todos` is analogous to https://my-firebase.firebaseio.com/todos.
4165
@@ -47,7 +71,7 @@ const mapFirebaseToProps = {
4771
export default connect(mapFirebaseToProps)(TodoApp)
4872
```
4973

50-
##### Inject `todos` and a function that adds a new todo (`addTodo`)
74+
##### Pass `todos` and a function that adds a new todo (`addTodo`) as props
5175

5276
```js
5377
const mapFirebaseToProps = (props, ref) => ({
@@ -58,7 +82,7 @@ const mapFirebaseToProps = (props, ref) => ({
5882
export default connect(mapFirebaseToProps)(TodoApp)
5983
```
6084

61-
##### Inject `todos`, `completedTodos`, a function that completes a todo (`completeTodo`) and one that logs in
85+
##### Pass `todos`, `completedTodos`, a function that completes a todo (`completeTodo`) and one that logs in as props
6286

6387
```js
6488
const mapFirebaseToProps = (props, ref, { auth }) => ({

0 commit comments

Comments
 (0)