React fetch hook
npm install react-fetch-hook
React hook for conveniently use Fetch API.
* Tiny (556 B). Calculated by size-limit
* Both Flow and TypeScript types included
``javascript
import React from "react";
import useFetch from "react-fetch-hook";
const Component = () => {
const { isLoading, data } = useFetch("https://swapi.co/api/people/1");
return isLoading ? (
`
useFetch accepts the same arguments as fetch function.
Install it with yarn:
`
yarn add react-fetch-hook
Or with npm:
`
npm i react-fetch-hook --save
Default is response => response.json() formatter. You can pass custom formatter:
`javascript
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
formatter: (response) => response.text()
});
`
The useFetch hook returns an error field at any fetch exception. error
The field extends Errorstatus
and has and statusText fields equal to Response.
`javascript
...
const Component = () => {
const { isLoading, data, error } = useFetch("https://swapi.co/api/people/1");
if (error) {
return
Code: ${error.status}
Message: ${error.statusText}
`
$3
Multiple in the same file/component supported:
`javascript
const result1 = useFetch("https://swapi.co/api/people/1");
const result2 = useFetch("https://swapi.co/api/people/2");
if (result1.isLoading && result2.isLoading) {
return
return
$3
The request will not be called until all elements of array be truthy. Example:`javascript
const {authToken} = useContext(authTokenContext);
const [someState, setSomeState] = useState(false);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
depends: [!!authToken, someState] // don't call request, if haven't authToken OR someState: false
});`
See example.$3
If any element of changed, request will be re-call. For example, you can use react-use-trigger for re-call the request:
`javascript
import createTrigger from "react-use-trigger";
import useTrigger from "react-use-trigger/useTrigger";const requestTrigger = createTrigger();
export const Subscriber = () => {
const requestTriggerValue = useTrigger(requestTrigger);
const { isLoading, data } = useFetch("https://swapi.co/api/people/1", {
depends: [requestTriggerValue]
});
return
;
}export const Sender = () => {
return
}
`$3
For custom promised function.javascript
import React from "react";
import usePromise from "react-fetch-hook/usePromise";
import callPromise from "..."const Component = () => {
const { isLoading, data } = usePromise(() => callPromise(...params), [...params]);
return isLoading ? (
Loading...
) : (
);
};
`Examples
* Basic - Just fetch data with
.
* Depends - Usage depends option for refresh query.
* Pagination - Usage usePaginationRequest for infinite scroll implementation.API
$3
Create a hook wrapper for fetch call.
`javascript
useFetch(
path: RequestInfo,
options?: {
...RequestOptions,
formatter?: Response => Promise
depends?: Array
},
specialOptions?: {
formatter?: Response => Promise
depends?: Array
}
): TUseFetchResult
`
where is:
`javascript
{
data: any,
isLoading: boolean,
error: any
}
`
, RequestOptions is fetch args.
$3
`javascript
usePromise>(
callFunction: ?(...args: I) => Promise,
...inputs: I
): TUsePromiseResult
`
where is
`javascript
type TUsePromiseResult = {
data: ?T,
isLoading: boolean,
error: mixed
}
`$3
⚠️ Warning: this method is experimental, API can be changed.Create a paginated request.
javascript
usePaginatedRequest = (
request: (params: { limit: number, offset: number }) => Promise>,
limit: number,
...depends: Array
): {
data: Array,
loadMore?: () => mixed,
hasMore: boolean
};
``* react-figma
* awesome-web-animation
* redux-helpers
* flowmap.blue
* Redis Agency
* Lessmess Agency
* BigDatr
* Fabrique numérique des Ministères Sociaux