https://github.com/knightburton/react-hooks-toolkit
The most commonly used custom react hooks in one place
https://github.com/knightburton/react-hooks-toolkit
hacktoberfest hooks react react-hooks typescript usedebounce usefetch useinterval useprevious usetimeout
Last synced: 3 months ago
JSON representation
The most commonly used custom react hooks in one place
- Host: GitHub
- URL: https://github.com/knightburton/react-hooks-toolkit
- Owner: knightburton
- License: mit
- Created: 2021-12-21T16:21:56.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T18:59:08.000Z (over 1 year ago)
- Last Synced: 2025-02-17T06:36:02.381Z (4 months ago)
- Topics: hacktoberfest, hooks, react, react-hooks, typescript, usedebounce, usefetch, useinterval, useprevious, usetimeout
- Language: TypeScript
- Homepage:
- Size: 1.13 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-hooks-toolkit
[](https://github.com/knightburton/react-hooks-toolkit/actions/workflows/development.yml)
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](/src/useDebounce/README.md)
- [useDebounceFunction](/src/useDebounceFunction/README.md)
- [useFetch](/src/useFetch/README.md)
- [useInterval](/src/useInterval/README.md)
- [usePrevious](/src/usePrevious/README.md)
- [useTimeout](/src/useTimeout/README.md)
### Getting started
#### Compatibility
Your project needs to use [React.js](https://reactjs.org/) 16.9 or later.
#### Installation
```bash
$ npm i @knightburton/react-hooks-toolkit
```
or
```bash
yarn add @knightburton/react-hooks-toolkit
```
### Usage
Here's an example of basic usage:
```tsx
import React, { useState } from 'react';
import { usePrevious } from '@knightburton/react-hooks-toolkit';
const App = () => {
const [value, setValue] = useState(0);
const previousValue = usePrevious(value);
const handleClick = (event: React.MouseEvent): void => {
setValue(Math.floor(Math.random() * 101));
};
return (
<>
The previous random number {previousValue || 0}
The current random number {value}
;
>
);
};
export default App;
```
For more example/usage visit each hooks own documentation.
### Contributing
First off all, thanks for taking the time to contribute! :muscle:
Before any action, please visit the [Code of Conduct](https://github.com/knightburton/react-hooks-toolkit/blob/main/CODE_OF_CONDUCT.md) and [Contributing guideline](https://github.com/knightburton/react-hooks-toolkit/blob/main/CONTRIBUTING.md) 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](https://github.com/knightburton/react-hooks-toolkit/blob/main/LICENSE).