@@ -144,7 +144,7 @@ factory function. Each has its unique benefits and downsides.
144
144
The ` useAsync ` hook (available [ from React v16.8.0] ( https://reactjs.org/hooks ) ) offers direct access to React Async's
145
145
core functionality from within your own function components:
146
146
147
- ``` js
147
+ ``` jsx
148
148
import { useAsync } from " react-async"
149
149
150
150
const loadCustomer = async ({ customerId }, { signal }) => {
@@ -170,7 +170,7 @@ const MyComponent = () => {
170
170
171
171
Or using the shorthand version:
172
172
173
- ``` js
173
+ ``` jsx
174
174
const MyComponent = () => {
175
175
const { data , error , isLoading } = useAsync (loadCustomer, options)
176
176
// ...
@@ -181,7 +181,7 @@ const MyComponent = () => {
181
181
182
182
Because fetch is so commonly used with ` useAsync ` , there's a dedicated ` useFetch ` hook for it:
183
183
184
- ``` js
184
+ ``` jsx
185
185
import { useFetch } from " react-async"
186
186
187
187
const MyComponent = () => {
@@ -204,7 +204,7 @@ is set to `"application/json"`.
204
204
The classic interface to React Async. Simply use ` <Async> ` directly in your JSX component tree, leveraging the render
205
205
props pattern:
206
206
207
- ``` js
207
+ ``` jsx
208
208
import Async from " react-async"
209
209
210
210
// Your promiseFn receives all props from Async and an AbortController instance
@@ -237,7 +237,7 @@ Several [helper components](#helper-components) are available for better legibil
237
237
children of ` <Async> ` , because they use Context, offering full flexibility. You can even use render props and helper
238
238
components together.
239
239
240
- ``` js
240
+ ``` jsx
241
241
import Async from " react-async"
242
242
243
243
const loadCustomer = ({ customerId }, { signal }) =>
@@ -266,7 +266,7 @@ const MyComponent = () => (
266
266
You can also create your own component instances, allowing you to preconfigure them with options such as default
267
267
` onResolve ` and ` onReject ` callbacks.
268
268
269
- ``` js
269
+ ``` jsx
270
270
import { createInstance } from " react-async"
271
271
272
272
const loadCustomer = ({ customerId }, { signal }) =>
@@ -539,15 +539,15 @@ Renders only while the deferred promise is still waiting to be run, or you have
539
539
540
540
#### Examples
541
541
542
- ``` js
542
+ ``` jsx
543
543
< Async deferFn= {deferFn}>
544
544
< Async .Initial >
545
545
< p> This text is only rendered while ` run` has not yet been invoked on ` deferFn` .< / p>
546
546
< / Async .Initial >
547
547
< / Async>
548
548
```
549
549
550
- ``` js
550
+ ``` jsx
551
551
< Async .Initial persist>
552
552
{({ error, isPending, run }) => (
553
553
< div>
@@ -574,13 +574,13 @@ Alias: `<Async.Loading>`
574
574
575
575
#### Examples
576
576
577
- ``` js
577
+ ``` jsx
578
578
< Async .Pending initial>
579
579
< p> This text is only rendered while performing the initial load.< / p>
580
580
< / Async .Pending >
581
581
```
582
582
583
- ``` js
583
+ ``` jsx
584
584
< Async .Pending > {({ startedAt }) => ` Loading since ${ startedAt .toISOString ()} ` }< / Async .Pending >
585
585
```
586
586
@@ -597,11 +597,11 @@ Alias: `<Async.Resolved>`
597
597
598
598
#### Examples
599
599
600
- ``` js
600
+ ``` jsx
601
601
< Async .Fulfilled persist> {data => < pre> {JSON .stringify (data)}< / pre> }< / Async .Fulfilled >
602
602
```
603
603
604
- ``` js
604
+ ``` jsx
605
605
< Async .Fulfilled > {(data , { finishedAt }) => ` Last updated ${ finishedAt .toISOString ()} ` }< / Async .Fulfilled >
606
606
```
607
607
@@ -616,11 +616,11 @@ This component renders only when the promise is rejected.
616
616
617
617
#### Examples
618
618
619
- ``` js
619
+ ``` jsx
620
620
< Async .Rejected persist> Oops.< / Async .Rejected >
621
621
```
622
622
623
- ``` js
623
+ ``` jsx
624
624
< Async .Rejected > {error => ` Unexpected error: ${ error .message } ` }< / Async .Rejected >
625
625
```
626
626
@@ -642,7 +642,7 @@ check out the [`examples` directory](https://github.com/ghengeveld/react-async/t
642
642
643
643
This does some basic data fetching, including a loading indicator, error state and retry.
644
644
645
- ``` js
645
+ ``` jsx
646
646
class App extends Component {
647
647
getSession = ({ sessionId }) => fetch (... )
648
648
@@ -677,7 +677,7 @@ class App extends Component {
677
677
678
678
This uses ` deferFn ` to trigger an update (e.g. POST / PUT request) after a form submit.
679
679
680
- ``` js
680
+ ``` jsx
681
681
const subscribeToNewsletter = (args , props , controller ) => fetch (... )
682
682
683
683
< Async deferFn= {subscribeToNewsletter}>
@@ -697,7 +697,7 @@ const subscribeToNewsletter = (args, props, controller) => fetch(...)
697
697
698
698
This uses both ` promiseFn ` and ` deferFn ` along with ` setData ` to implement optimistic updates.
699
699
700
- ``` js
700
+ ``` jsx
701
701
const updateAttendance = ([attend ]) => fetch (... ).then (() => attend, () => ! attend)
702
702
703
703
< Async promiseFn= {getAttendance} deferFn= {updateAttendance}>
@@ -718,7 +718,7 @@ const updateAttendance = ([attend]) => fetch(...).then(() => attend, () => !atte
718
718
719
719
This uses ` initialValue ` to enable server-side rendering with Next.js.
720
720
721
- ``` js
721
+ ``` jsx
722
722
static async getInitialProps () {
723
723
// Resolve the promise server-side
724
724
const customers = await loadCustomers ()
0 commit comments