File tree Expand file tree Collapse file tree 1 file changed +64
-0
lines changed Expand file tree Collapse file tree 1 file changed +64
-0
lines changed Original file line number Diff line number Diff line change @@ -148,3 +148,67 @@ const updateAttendance = attend => fetch(...).then(() => attend, () => !attend)
148
148
)}
149
149
< / Async>
150
150
```
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
+ ```
You can’t perform that action at this time.
0 commit comments