1.0.1 • Published 7 years ago
use-fetcher v1.0.1
useFetcher
An abortable React Hook for using fetch which supports Error handling, timeouts, deserialisations, time logging and re-fetching based on props.
Warning: Hooks are currently a React RFC and not ready for production. Use at minimum react@16.7.0-alpha.0 to use this package.
Installation
npm install use-fetcher
Example usages
import {useFetcher} from 'use-fetcher';
function GitHubUsers(props) {
const initialState = {};
const options = {
method: "GET", //Defaults to GET
body: {"say":"hello"}, // Defaults to {}, won't work with GET(will be ignored)
timeout: 1000, // Defaults to 3000ms
headers: {}, // Defaults to {}
returnRawFetchResponse:true, //Defaults to false
runWhenSpecificPropsChanges: [props.reFetchWhenThisPropChanges],// Defaults to []
}
const { data, success, abort, error, timeTaken } = useFetcher(
"https://api.github.com/users",
initialState,
options
);
//The data would contain the response returned from the URL in case the fetch Call succeeds.
return <div className="section" />;
}You can also:
- Specify a
timeoutfield in options as anintegerafter which the fetch will be aborted - Cancel the fetch call anytime by calling the
abort()returned fromuseFetch. If abort is supported by browser,abort()will returntrue. - Specify
calculateTimeTakenfield in options to have a returnedtimeTakenfield returned fromuseFetch - Re-fetch based on whether a specific prop has changed or not by specifying prop in
runWhenSpecificPropsChangesinoptions. - Get the raw object returned from fetch by passing
returnRawFetchResponsein options - Get a
blobobject if the Response header is neither aapplication/jsonorapplication/text
The body and the headers can be passed to fetch using body and headers in options respectively.
Note
The options doesn't need to be passed necessarily, a merge is performed with what is passed and the default values.
Acknowledgements
- Hat tip to anyone who uses and contributes to the code....
- React Hooks Docs