react-hooks-toolkit

The most commonly used custom react hooks in one place.

Unlike the other packages like this, it only targets core custom hooks to keep everything on minimal. These core custom hooks are the following:

• useDebounce
• useDebounceFunction
• useFetch
• useInterval
• usePrevious
• useTimeout

Getting started

Compatibility

Your project needs to use React.js 16.9 or later.

Installation

$ npm i @knightburton/react-hooks-toolkit

or

yarn add @knightburton/react-hooks-toolkit

Usage

Here's an example of basic usage:

import React, { useState } from 'react';
import { usePrevious } from '@knightburton/react-hooks-toolkit';

const App = () => {
  const [value, setValue] = useState<number>(0);
  const previousValue = usePrevious<number>(value);

  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
    setValue(Math.floor(Math.random() * 101));
  };

  return (
    <>
      <p>The previous random number <strong>{previousValue || 0}</strong></p>
      <p>The current random number <strong>{value}</strong></p>
      <input type="button" value="Random" onClick={handleClick} />;
    </>
  );
};

export default App;

For more example/usage visit each hooks own documentation.

Contributing

First off all, thanks for taking the time to contribute! 💪

Before any action, please visit the Code of Conduct and Contributing guideline for more information.

License

react-hooks-toolkit is Open Source software under the MIT license. Complete license and copyright information can be found within the license.