use-debouncer-hook-react
v1.0.1
Published
[![NPM version](https://badgen.net/npm/v/use-debounce-hooks)](https://www.npmjs.com/package/use-debouncer-hook-react)
Downloads
7
Readme
use-debouncer-hook
React custom hook
- useDebounce
install
$ npm install use-debouncer-hook-react
Demos
Here is a Demo of this hook that shows how it is working. https://react-debouncer-hook.vercel.app/
useDebouncer
When you want to run something after a certain delay you use this hook.
A useDebouncer
is hook of update state
after a certain time.
You can use it like the code below in your Projects First arguments is a fanction that you want to run after a certain delay Second arguments is our delay time. And the third one is dependencies.
import React, { useState } from "react";
import useDebouncer from "use-debouncer-hook-react";
function Component() {
const [count, setCount] = useState(1);
const delay = 1000;
useDebouncer(() => alert(count), delay, [count]);
return (
<div className="App">
<header className="App-header">
<div>{count}</div>
<button onClick={() => setCount((c) => c + 1)}>Increament</button>
</header>
</div>
);
}
NextJS
If you are using next js and you have problem with import the package you can import it dynamicly or check https://github.com/martpie/next-transpile-modules this repository to fix your