Skip to content
This repository was archived by the owner on Jul 12, 2023. It is now read-only.

Commit fbb4e4b

Browse files
authored
Update README.md
1 parent 89c6ad0 commit fbb4e4b

File tree

1 file changed

+45
-6
lines changed

1 file changed

+45
-6
lines changed

README.md

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
# useFetch [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=You%20can%20now%20use%20React%20Suspense%20with%20the%20Fetch%20API!&url=https://github.com/CharlesStover/fetch-suspense&via=CharlesStover&hashtags=react,reactjs,javascript,typescript,webdev,webdevelopment) [![version](https://img.shields.io/npm/v/fetch-suspense.svg)](https://www.npmjs.com/package/fetch-suspense) [![minified size](https://img.shields.io/bundlephobia/min/fetch-suspense.svg)](https://www.npmjs.com/package/fetch-suspense) [![minzipped size](https://img.shields.io/bundlephobia/minzip/fetch-suspense.svg)](https://www.npmjs.com/package/fetch-suspense) [![downloads](https://img.shields.io/npm/dt/fetch-suspense.svg)](https://www.npmjs.com/package/fetch-suspense) [![build](https://api.travis-ci.com/CharlesStover/fetch-suspense.svg)](https://travis-ci.com/CharlesStover/fetch-suspense/)
22

3-
`useFetch` is a React hook that supports the React 16.6 Suspense component implementation.
3+
`useFetch` is a React hook that supports the React 16.6 Suspense component
4+
implementation.
45

5-
The design decisions and development process for this package are outlind in the Medium article [React Suspense with the Fetch API](https://medium.com/@Charles_Stover/react-suspense-with-the-fetch-api-a1b7369b0469).
6+
The design decisions and development process for this package are outlind in
7+
the Medium article
8+
[React Suspense with the Fetch API](https://medium.com/@Charles_Stover/react-suspense-with-the-fetch-api-a1b7369b0469).
69

710
## Install
811

@@ -13,18 +16,54 @@ The design decisions and development process for this package are outlind in the
1316

1417
```JavaScript
1518
import useFetch from 'fetch-suspense';
19+
import React, { Suspense } from 'react';
1620

17-
// This fetching component will be delayed by
18-
// Suspense until the fetch request resolves.
21+
// This fetching component will be delayed by Suspense until the fetch request
22+
// resolves.
1923
// The return value of useFetch will be the response of the server.
2024
const MyFetchingComponent = () => {
2125
const data = useFetch('/path/to/api', { method: 'POST' });
2226
return 'The server responded with: ' + data;
2327
};
2428

2529
// The App component wraps the asynchronous fetching component in Suspense.
26-
// The fallback component (loading text) is
27-
// displayed until the fetch request resolves.
30+
// The fallback component (loading text) is displayed until the fetch request
31+
// resolves.
32+
const App = () => {
33+
return (
34+
<Suspense fallback="Loading...">
35+
<MyFetchingComponent />
36+
</Suspense>
37+
);
38+
};
39+
```
40+
41+
## Using a Custom Fetch API
42+
43+
If you don't want to rely on the global `fetch` API, you can create your own
44+
`useFetch` hook by importing the `createUseFetch` helper function.
45+
46+
```JavaScript
47+
import { createUseFetch } from 'fetch-suspense';
48+
import myFetchApi from 'my-fetch-package';
49+
import React, { Suspense } from 'react';
50+
51+
// Create a useFetch hook using one's own Fetch API.
52+
// NOTE: useFetch hereafter refers to this constant, not the default export of
53+
// the fetch-suspense package.
54+
const useFetch = createUseFetch(myFetchApi);
55+
56+
// This fetching component will be delayed by Suspense until the fetch request
57+
// resolves.
58+
// The return value of useFetch will be the response of the server.
59+
const MyFetchingComponent = () => {
60+
const data = useFetch('/path/to/api', { method: 'POST' });
61+
return 'The server responded with: ' + data;
62+
};
63+
64+
// The App component wraps the asynchronous fetching component in Suspense.
65+
// The fallback component (loading text) is displayed until the fetch request
66+
// resolves.
2867
const App = () => {
2968
return (
3069
<Suspense fallback="Loading...">

0 commit comments

Comments
 (0)