UNPKG

@kiwicom/orbit-components

Version:

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

47 lines (38 loc) 1.22 kB
# useInterval To implement the `useInterval` hook in your component, add the import: ```jsx import useInterval from "@kiwicom/orbit-components/lib/hooks/useInterval"; ``` Then you can use it like that: ```jsx export default function Component() { // The counter const [count, setCount] = useState < number > 0; // Dynamic delay const [delay, setDelay] = useState < number > 1000; // ON/OFF const [isPlaying, setPlaying] = useState < boolean > false; useInterval( () => { // Your custom logic here setCount(count + 1); }, // Delay in milliseconds or null to stop it isPlaying ? delay : null, ); const handleChange = (event: ChangeEvent<HTMLInputElement>) => { setDelay(Number(event.target.value)); }; return ( <> <h1>{count}</h1> <button onClick={() => setPlaying(!isPlaying)}>{isPlaying ? "pause" : "play"}</button> <p> <label htmlFor="delay">Delay: </label> <input type="number" name="delay" onChange={handleChange} value={delay} /> </p> </> ); } ``` More about `useInterval` hook read [here](https://usehooks-ts.com/react-hook/use-interval) and [here](https://usehooks-ts.com/react-hook/use-interval)