Skip to content

Commit fc4b61d

Browse files
committed
Update docs and package.json ready for 1.0.0 release
1 parent 0c22c88 commit fc4b61d

File tree

2 files changed

+64
-14
lines changed

2 files changed

+64
-14
lines changed

README.md

+62-12
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 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.
8+
> [Hooks](https://reactjs.org/docs/hooks-intro.html) are a new feature that lets you use state and other React features without writing a class and are available in React v16.8.0 or later.
99
10-
> 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.
10+
> Official support for Hooks will be added to React Native in [v0.59.0](https://github.com/react-native-community/react-native-releases/issues/79#issuecomment-457735214) - as soon as it's released, 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, React 16.8.0-alpha.0 or later** and **Firebase v5.0.0 or later**.
14+
React Firebase Hooks requires **React 16.8.0 or later** and **Firebase v5.0.0 or later**.
1515

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

2222
## Why?
2323

24-
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.
24+
There has been a **lot** of hype around React Hooks, but this hype merely reflects that there are obvious real world benefits of Hooks 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 had been using 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

30+
- [Auth Hooks](#Auth)
31+
- [Cloud Firestore Hooks](#cloud-firestore)
32+
- [Cloud Storage Hooks](#cloud-storage)
33+
- [Realtime Database Hooks](#realtime-database)
34+
3035
### Auth
3136

3237
React Firebase Hooks provides a convenience listener for Firebase Auth's auth state. The hook wraps around the `firebase.auth().onAuthStateChange()` method to ensure that it is always up to date.
@@ -162,6 +167,53 @@ const FirestoreDocument = () => {
162167
};
163168
```
164169

170+
### Cloud Storage
171+
172+
React Firebase Hooks provides convenience listeners for files stored within
173+
Firebase Cloud Storage. The hooks wrap around the `firebase.storage().ref().getDownloadURL()` method.
174+
175+
In addition to returning the download URL, the hooks provide an `error` and `loading` property
176+
to give a complete lifecycle for loading from Cloud Storage.
177+
178+
#### `useDownloadURL(ref)`
179+
180+
Parameters:
181+
182+
- `ref`: `firebase.storage.Reference`
183+
184+
Returns:
185+
`DownloadURLHook` containing
186+
187+
- `error`: An optional error object returned by Firebase
188+
- `loading`: A `boolean` to indicate if the download URL is still being loaded
189+
- `value`: The download URL
190+
191+
Example:
192+
193+
```js
194+
import { useDownloadUrl } from 'react-firebase-hooks/storage';
195+
196+
const DownloadURL = () => {
197+
const { error, loading, value } = useDownloadURL(
198+
firebase.storage().ref('path/to/file')
199+
);
200+
201+
return (
202+
<div>
203+
<p>
204+
{error && <strong>Error: {error}</strong>}
205+
{loading && <span>Download URL: Loading...</span>}
206+
{!loading && value && (
207+
<React.Fragment>
208+
<span>Download URL: {value}</span>
209+
</React.Fragment>
210+
)}
211+
</p>
212+
</div>
213+
);
214+
};
215+
```
216+
165217
### Realtime Database
166218

167219
React Firebase Hooks provides convenience listeners for lists and values stored within the
@@ -189,18 +241,18 @@ Example:
189241
import { useList } from 'react-firebase-hooks/database';
190242

191243
const DatabaseList = () => {
192-
const { error, list, loading } = useList(firebase.database().ref('list'));
244+
const { error, loading, value } = useList(firebase.database().ref('list'));
193245

194246
return (
195247
<div>
196248
<p>
197249
{error && <strong>Error: {error}</strong>}
198250
{loading && <span>List: Loading...</span>}
199-
{!loading && list && (
251+
{!loading && value && (
200252
<React.Fragment>
201253
<span>
202254
List:{' '}
203-
{list.map(v => (
255+
{value.map(v => (
204256
<React.Fragment key={v.key}>{v.val()}, </React.Fragment>
205257
))}
206258
</span>
@@ -228,25 +280,23 @@ Returns:
228280
- `loading`: A `boolean` to indicate if the listener is still being loaded
229281
- `value`: A list of `firebase.database.DataSnapshot.key` values
230282

231-
```
232-
233283
#### `useListVals<T>(ref, keyField)`
234284

235285
Similar to `useList`, but this hook returns a typed list of the `DataSnapshot.val()` values, rather than the the
236286
`DataSnapshot`s themselves.
237287

238288
Parameters:
289+
239290
- `ref`: `firebase.database.Reference`
240291
- `keyField`: (Optional) Name of field that should be populated with the `DataSnapshot.key` property
241292

242293
Returns:
243294
`ListValsHook` containing
295+
244296
- `error`: An optional error object returned by Firebase
245297
- `loading`: A `boolean` to indicate if the listener is still being loaded
246298
- `value`: A list of `firebase.database.DataSnapshot.val()` values, combined with the optional key field
247299

248-
```
249-
250300
#### `useObject(ref)`
251301

252302
Parameters:

package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
"devDependencies": {
4848
"firebase": "^5.5.6",
4949
"path": "^0.12.7",
50-
"react": "^16.7.0-alpha.0",
50+
"react": "^16.8.0",
5151
"rimraf": "^2.6.2",
5252
"rollup": "0.57.1",
5353
"rollup-plugin-commonjs": "9.1.0",
@@ -58,7 +58,7 @@
5858
"typescript": "2.8.1"
5959
},
6060
"peerDependencies": {
61-
"react": "^16.7.0-alpha.0 || ^16.8.0-alpha.0"
61+
"react": "16.8.0"
6262
},
6363
"typings": "index.d.ts"
6464
}

0 commit comments

Comments
 (0)