1.0.1 • Published 3 years ago
use-debouncer-hook-react v1.0.1
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