https://github.com/mauricedb/use-abortable-fetch

React hook that does a fetch and aborts when the components is unloaded or a different request is made
https://github.com/mauricedb/use-abortable-fetch

Last synced: about 2 months ago
JSON representation

React hook that does a fetch and aborts when the components is unloaded or a different request is made

• Host: GitHub
• URL: https://github.com/mauricedb/use-abortable-fetch
• Owner: mauricedb
• License: mit
• Created: 2018-11-06T11:45:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-08T20:04:21.000Z (about 2 months ago)
• Last Synced: 2024-05-08T21:25:46.024Z (about 2 months ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/use-abortable-fetch
• Size: 6.35 MB
• Stars: 158
• Watchers: 3
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-list - use-abortable-fetch
• awesome-react-hooks - `use-abortable-fetch`
• awesome-react-hooks-cn - `use-abortable-fetch`
• awesome-react-hooks - `use-abortable-fetch`
• fucking-awesome-react-hooks - `use-abortable-fetch`
• awesome-react-hooks - use-abortable-fetch - React hook that does a fetch and aborts when the components is unloaded or a different request is made (Packages)
• awesome-react-hooks - `use-abortable-fetch`

README

        
# use-abortable-fetch

[![Build Status](https://travis-ci.org/mauricedb/use-abortable-fetch.svg?branch=master)](https://travis-ci.org/mauricedb/use-abortable-fetch) 

React hook that does a fetch and aborts when the components is unloaded or a new fetch request is started.

# Installation

`npm install use-abortable-fetch`

or

`yarn add use-abortable-fetch`

## Example usage:

```JavaScript

import React from 'react';

import useAbortableFetch from 'use-abortable-fetch';

const ChuckNorrisJoke = () => {

  const { data, loading, error, abort } = useAbortableFetch(

    '//api.icndb.com/jokes/random/?limitTo=[nerdy]&escape=javascript'

  );

  if (loading) return 
Loading...
;

  if (error) return 
Error: {error.message}
;

  if (!data) return null;


  return 
Joke: {data.value.joke}
;

};


export default ChuckNorrisJoke;

```

See this [CodeSandbox](https://codesandbox.io/s/n5q6xmwwq0) for a running example.