react-use-cancel-token

A handy react hook to cancel axios requests

Usage no npm install needed!

<script type="module">
  import reactUseCancelToken from 'https://cdn.skypack.dev/react-use-cancel-token';
</script>

README

useCancelToken

NPM Downloads JavaScript Style Guide

A handy react hook to cancel axios requests

Demo

Install

npm install --save react-use-cancel-token

Usage

import * as React from 'react';
import axios from 'axios';

import useCancelToken from 'react-use-cancel-token';

const Example = () => {
  const { newCancelToken, cancelPreviousRequest, isCancel } = useCancelToken();

  const handleClick = async () => {
    cancelPreviousRequest();

    try {
      const response = await axios.get('request_url', { cancelToken: newCancelToken() });

      if (response.status === 200) {
        // handle success
      }
    } catch (err) {
      if (isCancel(err)) return;
      console.error(err);
    }
  };

  return <button onClick={handleClick}>send request</button>;
};

Outputs

Property Type Description
source MutableObjectRef Reference to Axios cancel token source
newCancelToken () => CancelToken Generate the cancel token sent in the Axios request
cancelPreviousRequest () => void Cancel any previous Axios request
isCancel () => boolean Check if the error returned in Axios response is a cancel token error

License

MIT © AXeL-dev