Skip to content

Commit 2a7f2e5

Browse files
authored
Fix syntax highlighting for JSX.
1 parent f38f67c commit 2a7f2e5

File tree

1 file changed

+18
-18
lines changed

1 file changed

+18
-18
lines changed

Diff for: README.md

+18-18
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ factory function. Each has its unique benefits and downsides.
144144
The `useAsync` hook (available [from React v16.8.0](https://reactjs.org/hooks)) offers direct access to React Async's
145145
core functionality from within your own function components:
146146

147-
```js
147+
```jsx
148148
import { useAsync } from "react-async"
149149

150150
const loadCustomer = async ({ customerId }, { signal }) => {
@@ -170,7 +170,7 @@ const MyComponent = () => {
170170

171171
Or using the shorthand version:
172172

173-
```js
173+
```jsx
174174
const MyComponent = () => {
175175
const { data, error, isLoading } = useAsync(loadCustomer, options)
176176
// ...
@@ -181,7 +181,7 @@ const MyComponent = () => {
181181

182182
Because fetch is so commonly used with `useAsync`, there's a dedicated `useFetch` hook for it:
183183

184-
```js
184+
```jsx
185185
import { useFetch } from "react-async"
186186

187187
const MyComponent = () => {
@@ -204,7 +204,7 @@ is set to `"application/json"`.
204204
The classic interface to React Async. Simply use `<Async>` directly in your JSX component tree, leveraging the render
205205
props pattern:
206206

207-
```js
207+
```jsx
208208
import Async from "react-async"
209209

210210
// 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
237237
children of `<Async>`, because they use Context, offering full flexibility. You can even use render props and helper
238238
components together.
239239

240-
```js
240+
```jsx
241241
import Async from "react-async"
242242

243243
const loadCustomer = ({ customerId }, { signal }) =>
@@ -266,7 +266,7 @@ const MyComponent = () => (
266266
You can also create your own component instances, allowing you to preconfigure them with options such as default
267267
`onResolve` and `onReject` callbacks.
268268

269-
```js
269+
```jsx
270270
import { createInstance } from "react-async"
271271

272272
const loadCustomer = ({ customerId }, { signal }) =>
@@ -539,15 +539,15 @@ Renders only while the deferred promise is still waiting to be run, or you have
539539

540540
#### Examples
541541

542-
```js
542+
```jsx
543543
<Async deferFn={deferFn}>
544544
<Async.Initial>
545545
<p>This text is only rendered while `run` has not yet been invoked on `deferFn`.</p>
546546
</Async.Initial>
547547
</Async>
548548
```
549549

550-
```js
550+
```jsx
551551
<Async.Initial persist>
552552
{({ error, isPending, run }) => (
553553
<div>
@@ -574,13 +574,13 @@ Alias: `<Async.Loading>`
574574

575575
#### Examples
576576

577-
```js
577+
```jsx
578578
<Async.Pending initial>
579579
<p>This text is only rendered while performing the initial load.</p>
580580
</Async.Pending>
581581
```
582582

583-
```js
583+
```jsx
584584
<Async.Pending>{({ startedAt }) => `Loading since ${startedAt.toISOString()}`}</Async.Pending>
585585
```
586586

@@ -597,11 +597,11 @@ Alias: `<Async.Resolved>`
597597

598598
#### Examples
599599

600-
```js
600+
```jsx
601601
<Async.Fulfilled persist>{data => <pre>{JSON.stringify(data)}</pre>}</Async.Fulfilled>
602602
```
603603

604-
```js
604+
```jsx
605605
<Async.Fulfilled>{(data, { finishedAt }) => `Last updated ${finishedAt.toISOString()}`}</Async.Fulfilled>
606606
```
607607

@@ -616,11 +616,11 @@ This component renders only when the promise is rejected.
616616

617617
#### Examples
618618

619-
```js
619+
```jsx
620620
<Async.Rejected persist>Oops.</Async.Rejected>
621621
```
622622

623-
```js
623+
```jsx
624624
<Async.Rejected>{error => `Unexpected error: ${error.message}`}</Async.Rejected>
625625
```
626626

@@ -642,7 +642,7 @@ check out the [`examples` directory](https://github.com/ghengeveld/react-async/t
642642

643643
This does some basic data fetching, including a loading indicator, error state and retry.
644644

645-
```js
645+
```jsx
646646
class App extends Component {
647647
getSession = ({ sessionId }) => fetch(...)
648648

@@ -677,7 +677,7 @@ class App extends Component {
677677

678678
This uses `deferFn` to trigger an update (e.g. POST / PUT request) after a form submit.
679679

680-
```js
680+
```jsx
681681
const subscribeToNewsletter = (args, props, controller) => fetch(...)
682682

683683
<Async deferFn={subscribeToNewsletter}>
@@ -697,7 +697,7 @@ const subscribeToNewsletter = (args, props, controller) => fetch(...)
697697

698698
This uses both `promiseFn` and `deferFn` along with `setData` to implement optimistic updates.
699699

700-
```js
700+
```jsx
701701
const updateAttendance = ([attend]) => fetch(...).then(() => attend, () => !attend)
702702

703703
<Async promiseFn={getAttendance} deferFn={updateAttendance}>
@@ -718,7 +718,7 @@ const updateAttendance = ([attend]) => fetch(...).then(() => attend, () => !atte
718718

719719
This uses `initialValue` to enable server-side rendering with Next.js.
720720

721-
```js
721+
```jsx
722722
static async getInitialProps() {
723723
// Resolve the promise server-side
724724
const customers = await loadCustomers()

0 commit comments

Comments
 (0)