Skip to content

Commit 0c22c88

Browse files
committed
Update README.md
1 parent aba6f5f commit 0c22c88

File tree

1 file changed

+44
-27
lines changed

1 file changed

+44
-27
lines changed

README.md

Lines changed: 44 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ A set of reusable React Hooks for [Firebase](https://firebase.google.com/).
55
[![npm version](https://img.shields.io/npm/v/react-firebase-hooks.svg?style=flat-square)](https://www.npmjs.com/package/react-firebase-hooks)
66
[![npm downloads](https://img.shields.io/npm/dm/react-firebase-hooks.svg?style=flat-square)](https://www.npmjs.com/package/react-firebase-hooks)
77

8-
> [Hooks](https://reactjs.org/docs/hooks-intro.html) are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.
8+
> [Hooks](https://reactjs.org/docs/hooks-intro.html) are a new feature proposal that lets you use state and other React features without writing a class. They were first added in the React v16.7.0-alpha and are being discussed in an open RFC. They did not make it into the released v16.7.0, but are currently available in the React v16.8.0-alpha stream.
99
1010
> Hooks are not currently supported in React Native - as soon as they are, we'll make sure that React Firebase Hooks works with both the Firebase JS SDK and React Native Firebase.
1111
1212
## Installation
1313

14-
React Firebase Hooks requires **React 16.7.0-alpha.0 or later** and **Firebase v5.0.0 or later**.
14+
React Firebase Hooks requires **React 16.7.0-alpha.0, React 16.8.0-alpha.0 or later** and **Firebase v5.0.0 or later**.
1515

1616
```
1717
npm install --save react-firebase-hooks
@@ -23,7 +23,7 @@ This assumes that you’re using the [npm](https://npmjs.com) package manager wi
2323

2424
It's clear that there is a **lot** of hype around React Hooks despite them still being in alpha, but this hype merely reflects that there are obvious real world benefits to React developers everywhere.
2525

26-
This library explores how React Hooks can work to make integration with Firebase even more straightforward than it already is. It takes inspiration for naming from RxFire and is based on an internal library that we have used in a number of apps prior to the release of React Hooks. The implementation with hooks is 10x simpler than our previous implementation.
26+
This library explores how React Hooks can work to make integration with Firebase even more straightforward than it already is. It takes inspiration for naming from RxFire and is based on an internal library that we have used in a number of apps prior to the release of React Hooks. The implementation with hooks is 10x simpler than our previous implementation.
2727

2828
## Documentation
2929

@@ -34,10 +34,12 @@ React Firebase Hooks provides a convenience listener for Firebase Auth's auth st
3434
#### `useAuthState(auth)`
3535

3636
Parameters:
37+
3738
- `auth`: `firebase.auth.Auth`
3839

3940
Returns:
4041
`AuthStateHook` containing:
42+
4143
- `initialising`: If the listener is still waiting for the user to be loaded
4244
- `user`: The `firebase.User`, or `null`, if no user is logged in
4345

@@ -51,14 +53,16 @@ const CurrentUser = () => {
5153
const login = () => {
5254
firebase.auth().signInWithEmailAndPassword('[email protected]', 'password');
5355
};
54-
const logout = () => { firebase.auth().signOut(); };
56+
const logout = () => {
57+
firebase.auth().signOut();
58+
};
5559

5660
if (initialising) {
5761
return (
5862
<div>
5963
<p>Initialising User...</p>
6064
</div>
61-
)
65+
);
6266
}
6367
if (user) {
6468
return (
@@ -68,17 +72,14 @@ const CurrentUser = () => {
6872
</div>
6973
);
7074
}
71-
return (
72-
<button onClick={login}>Log in</button>
73-
)
75+
return <button onClick={login}>Log in</button>;
7476
};
75-
7677
```
7778

7879
### Cloud Firestore
7980

8081
React Firebase Hooks provides convenience listeners for Collections and Documents stored with
81-
Cloud Firestore. The hooks wrap around the `firebase.firestore.collection().onSnapshot()`
82+
Cloud Firestore. The hooks wrap around the `firebase.firestore.collection().onSnapshot()`
8283
and `firebase.firestore().doc().onSnapshot()` methods.
8384

8485
In addition to returning the snapshot value, the hooks provide an `error` and `loading` property
@@ -87,20 +88,25 @@ to give a complete lifecycle for loading and listening to Cloud Firestore.
8788
#### `useCollection(query)`
8889

8990
Parameters:
91+
9092
- `query`: `firebase.firestore.Query`
9193

9294
Returns:
9395
`CollectionHook` containing
96+
9497
- `error`: An optional `firebase.FirebaseError` returned by Firebase
9598
- `loading`: A `boolean` to indicate if the listener is still being loaded
9699
- `value`: A `firebase.firestore.QuerySnapshot`
97100

98101
Example:
102+
99103
```js
100104
import { useCollection } from 'react-firebase-hooks/firestore';
101105

102106
const FirestoreCollection = () => {
103-
const { error, loading, value } = useCollection(firebase.firestore().collection('hooks'));
107+
const { error, loading, value } = useCollection(
108+
firebase.firestore().collection('hooks')
109+
);
104110
return (
105111
<div>
106112
<p>
@@ -110,70 +116,75 @@ const FirestoreCollection = () => {
110116
<span>
111117
Collection:{' '}
112118
{value.docs.map(doc => (
113-
<React.Fragment key={doc.id}>{JSON.stringify(doc.data())}, </React.Fragment>
119+
<React.Fragment key={doc.id}>
120+
{JSON.stringify(doc.data())},{' '}
121+
</React.Fragment>
114122
))}
115123
</span>
116124
)}
117125
</p>
118126
</div>
119127
);
120-
}
128+
};
121129
```
122130

123131
#### `useDocument(docRef)`
124132

125133
Parameters:
134+
126135
- `docRef`: `firebase.firestore.DocumentReference`
127136

128137
Returns:
129138
`DocumentHook` containing
139+
130140
- `error`: An optional `firebase.FirebaseError` returned by Firebase
131141
- `loading`: A `boolean` to indicate if the listener is still being loaded
132142
- `value`: A `firebase.firestore.DocumentSnapshot`
133143

134144
Example:
145+
135146
```js
136147
import { useDocument } from 'react-firebase-hooks/firestore';
137148

138149
const FirestoreDocument = () => {
139-
const { error, loading, value } = useDocument(firebase.firestore().doc('hooks/nBShXiRGFAhuiPfBaGpt'));
150+
const { error, loading, value } = useDocument(
151+
firebase.firestore().doc('hooks/nBShXiRGFAhuiPfBaGpt')
152+
);
140153
return (
141154
<div>
142155
<p>
143156
{error && <strong>Error: {error}</strong>}
144157
{loading && <span>Document: Loading...</span>}
145-
{value && (
146-
<span>
147-
Document: {JSON.stringify(value.data())}
148-
</span>
149-
)}
158+
{value && <span>Document: {JSON.stringify(value.data())}</span>}
150159
</p>
151160
</div>
152161
);
153-
}
162+
};
154163
```
155164

156-
157165
### Realtime Database
158166

159167
React Firebase Hooks provides convenience listeners for lists and values stored within the
160-
Firebase Realtime Database. The hooks wrap around the `firebase.database().ref().on()` method.
168+
Firebase Realtime Database. The hooks wrap around the `firebase.database().ref().on()` method.
161169

162170
In addition to returning the list or value, the hooks provide an `error` and `loading` property
163171
to give a complete lifecycle for loading and listening to the Realtime Database.
164172

165173
#### `useList(ref)`
166174

167175
Parameters:
176+
168177
- `ref`: `firebase.database.Reference`
169178

170179
Returns:
171180
`ListHook` containing
181+
172182
- `error`: An optional error object returned by Firebase
173183
- `loading`: A `boolean` to indicate if the listener is still being loaded
174184
- `value`: A list of `firebase.database.DataSnapshot`
175185

176186
Example:
187+
177188
```js
178189
import { useList } from 'react-firebase-hooks/database';
179190

@@ -189,7 +200,9 @@ const DatabaseList = () => {
189200
<React.Fragment>
190201
<span>
191202
List:{' '}
192-
{list.map(v => <React.Fragment key={v.key}>{v.val()}, </React.Fragment>)}
203+
{list.map(v => (
204+
<React.Fragment key={v.key}>{v.val()}, </React.Fragment>
205+
))}
193206
</span>
194207
</React.Fragment>
195208
)}
@@ -205,10 +218,12 @@ As above, but this hook returns a list of the `DataSnapshot.key` values, rather
205218
`DataSnapshot`s themselves.
206219

207220
Parameters:
221+
208222
- `ref`: `firebase.database.Reference`
209223

210224
Returns:
211225
`ListKeysHook` containing
226+
212227
- `error`: An optional error object returned by Firebase
213228
- `loading`: A `boolean` to indicate if the listener is still being loaded
214229
- `value`: A list of `firebase.database.DataSnapshot.key` values
@@ -235,15 +250,18 @@ Returns:
235250
#### `useObject(ref)`
236251

237252
Parameters:
253+
238254
- `ref`: `firebase.database.Reference`
239255

240256
Returns:
241257
`ObjectHook` containing
258+
242259
- `error`: An optional error object returned by Firebase
243260
- `loading`: A `boolean` to indicate if the listener is still being loaded
244261
- `value`: A `firebase.database.DataSnapshot`
245262

246263
Example:
264+
247265
```js
248266
import { useObject } from 'react-firebase-hooks/database';
249267

@@ -260,7 +278,6 @@ const DatabaseValue = () => {
260278
</div>
261279
);
262280
};
263-
264281
```
265282

266283
#### `useObjectVal<T>(ref)`
@@ -269,16 +286,16 @@ As above, but this hook returns the typed contents of `DataSnapshot.val()` rathe
269286
`DataSnapshot` itself.
270287

271288
Parameters:
289+
272290
- `ref`: `firebase.database.Reference`
273291

274292
Returns:
275293
`ObjectValHook` containing
294+
276295
- `error`: An optional error object returned by Firebase
277296
- `loading`: A `boolean` to indicate if the listener is still being loaded
278297
- `value`: The contents of `firebase.database.DataSnapshot.val()`
279298

280-
```
281-
282299
## License
283300

284-
* See [LICENSE](/LICENSE)
301+
- See [LICENSE](/LICENSE)

0 commit comments

Comments
 (0)