@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
Markdown
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)