Skip to content

Commit 864d409

Browse files
committed
add readme
1 parent 003caf6 commit 864d409

File tree

1 file changed

+68
-0
lines changed

1 file changed

+68
-0
lines changed

README.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,70 @@
11
# react-use-data-loader
2+
23
React hook for loading data
4+
5+
# Installation
6+
7+
Using npm:
8+
9+
```
10+
$ npm install --save react-use-data-loader
11+
```
12+
13+
Using yarn:
14+
15+
```
16+
$ yarn add react-use-data-loader
17+
```
18+
19+
Since this module uses React's upcoming Hooks feature, to try this out you'll need to install the 16.7.0-alpha.0 version of react and react-dom:
20+
21+
```
22+
$ yarn add react@16.7.0-alpha.0 react-dom@16.7.0-alpha.0
23+
```
24+
25+
# Usage
26+
27+
```jsx
28+
import React from 'react'
29+
import { useDataLoader } from 'react-use-data-loader'
30+
31+
async function getData(id) {
32+
/* async api call */
33+
34+
return 'item ' + id
35+
}
36+
37+
function Example({ id }) {
38+
const { data, error, loading, retry } = useDataLoader(getData, id)
39+
40+
if (loading) {
41+
return <div>loading...</div>
42+
}
43+
44+
if (error) {
45+
return <div>Error</div>
46+
}
47+
48+
return <ViewData data={data} />
49+
}
50+
51+
function App() {
52+
return <Example id={3} />
53+
}
54+
```
55+
56+
# API
57+
58+
```ts
59+
60+
useDataLoader(getData: GetData, ...args: Args) => ({
61+
data: Data | null,
62+
error: Error | null,
63+
loading: boolean,
64+
retry: Retry,
65+
})
66+
67+
type GetData = (...args: Args) => Promise<Data>
68+
type Retry = () => void
69+
70+
```

0 commit comments

Comments
 (0)