Skip to content

Commit 03f027a

Browse files
committed
Update README.md
1 parent 9e445a6 commit 03f027a

File tree

1 file changed

+64
-0
lines changed

1 file changed

+64
-0
lines changed

README.md

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,3 +148,67 @@ const updateAttendance = attend => fetch(...).then(() => attend, () => !attend)
148148
)}
149149
</Async>
150150
```
151+
152+
## Helper components
153+
154+
`Async` provides several helper components that make your JSX even more declarative.
155+
They don't have to be direct children of `<Async>` and you can use the same component several times.
156+
157+
### `<Async.Loading>`
158+
159+
Renders only while the promise is still pending.
160+
161+
#### Props
162+
163+
- `initial` {boolean} Show only on initial load (data is undefined)
164+
- `children` {Function|Node} Function which receives props object or React node
165+
166+
#### Examples
167+
168+
```js
169+
<Async.Loading initial>
170+
<p>This text is only rendered while performing the initial load.</p>
171+
</Async.Loading>
172+
```
173+
174+
```js
175+
<Async.Loading>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Loading>
176+
```
177+
178+
### `<Async.Resolved>`
179+
180+
Renders only when the promise is resolved.
181+
182+
#### Props
183+
184+
- `persist` {boolean} Show old data while loading new data. By default it hides as soon as a new promise starts.
185+
- `children` {Function|Node} Render function which receives data and props object or just a plain React node.
186+
187+
#### Examples
188+
189+
```js
190+
<Async.Resolved persist>{({ data }) => <pre>{JSON.stringify(data)}</pre>}</Async.Resolved>
191+
```
192+
193+
```js
194+
<Async.Resolved>{({ finishedAt }) => `Last updated ${startedAt.toISOString()}`}</Async.Resolved>
195+
```
196+
197+
### `<Async.Rejected>`
198+
199+
Renders only when the promise is rejected.
200+
201+
#### Props
202+
203+
- `persist` {boolean} Show old error while loading new data. By default it hides as soon as a new promise starts.
204+
- `children` {Function|Node} Render function which receives error and props object or just a plain React node.
205+
206+
#### Examples
207+
208+
```js
209+
<Async.Rejected persist>Oops.</Async.Rejected>
210+
```
211+
212+
```js
213+
<Async.Rejected>{({ error }) => `Unexpected error: ${error.message}`}</Async.Rejected>
214+
```

0 commit comments

Comments
 (0)