![\"logo\"](\"https://github.com/EricLambrecht/react-timing-hooks/raw/main/logo.png\"){kind=logo}
\r\n\r\n[](https://www.npmjs.com/package/react-timing-hooks)\r\n[](https://bundlephobia.com/result?p=react-timing-hooks)\r\n\r\n[](https://github.com/EricLambrecht/react-timing-hooks)\r\n[](https://coveralls.io/github/EricLambrecht/react-timing-hooks?branch=main)\r\n\r\n## What's this?!\r\n\r\nThis is a very little package with **React hooks wrapping time-related vanilla Javascript functions**,\r\nso you can use them with minimal effort in your React apps without having to worry about manual \r\nclean up, or writing boilerplate to pause/resume intervals etc.\r\n\r\n### Feature Overview\r\n\r\n* Hooks for all timing-related **vanilla JS functions** like:\r\n * setInterval() β> [useInterval()][interval-api] | [MDN][interval-mdn]\r\n * setTimeout() β> [useTimeout()][timeout-api] | [MDN][timeout-mdn]\r\n * requestAnimationFrame() β> [useAnimationFrame()][raf-api] | [MDN][raf-mdn]\r\n * requestIdleCallback() β> [useIdleCallback()][idle-cb-api] | [MDN][idle-cb-mdn]\r\n* β¦and **additional [utility hooks][all-hooks]** for common tasks like\r\n * throttling: `useThrottledState()`, `useThrottle()`, `useDebounce()`\r\n * GFX/animation/rendering: `useAnimationFrameLoop()`\r\n * reactive counters: `useCounter()`, `useCountdown()`, `useTimer()`\r\n * time: `useClock()`\r\n * async effects: `useTimeoutEffect()`, `useIdleCallbackEffect()`\r\n * oscillation: `useOscillator()`\r\n* **Reactive intervals**: intervals can be controlled via **pause, resume, start or stop**\r\n* A **versatile API**: customizable settings, many hook \"flavors\" depending on the use-case.\r\n* **Automatic clean-ups** of pending timers, intervals etc. on unmount\r\n* Callbacks are **automatically memoized**\r\n* Full **Typescript** support\r\n* Very **[lightweight](https://bundlephobia.com/result?p=react-timing-hooks)** (no transitive dependencies!)\r\n* **Tree-shakable** β You only bundle what you use!\r\n\r\n\r\n## Installation\r\n\r\n```bash\r\n# via npm\r\nnpm i react-timing-hooks\r\n\r\n# via yarn\r\nyarn add react-timing-hooks\r\n```\r\n\r\n### Documentation\r\n\r\n[https://ericlambrecht.github.io/react-timing-hooks/](https://ericlambrecht.github.io/react-timing-hooks/)\r\n\r\n**How to migrate**\r\n\r\nhttps://ericlambrecht.github.io/react-timing-hooks/migrations/\r\n\r\n## Some Examples\r\n\r\n#### A \"status logger\" with `useInterval()`\r\n```jsx harmony\r\nimport { useInterval } from 'react-timing-hooks'\r\n\r\nconst StatusLogger = () => {\r\n const logUpdates = () => console.log('status update')\r\n // could also be intialized with { startOnMount: true } to immediately start the interval\r\n const { start, pause, resume, isPaused } = useInterval(logUpdates, 1000)\r\n\r\n return Result: {result}
\r\n{counter}
\r\n \r\n}\r\n```\r\n\r\n#### After\r\n\r\n```jsx harmony\r\nimport { useState } from 'react'\r\nimport { useInterval } from 'react-timing-hooks'\r\n\r\nconst Counter = () => {\r\n const [counter, setCounter] = useState(0)\r\n \r\n const { start } = useInterval(() => setCounter(c => c + 1), 1000)\r\n\r\n return <>\r\n \r\n{counter}
\r\n \r\n}\r\n```\r\n\r\nWell,β¦ actually, there is even a shorter way using the utility hook `useTimer()` π\r\n\r\n#### After After\r\n\r\n```jsx harmony\r\nimport { useCounter } from 'react-timing-hooks'\r\n\r\nconst Counter = () => {\r\n const [counter, { start }] = useTimer(0)\r\n\r\n return <>\r\n \r\n{counter}
\r\n \r\n}\r\n```\r\n----\r\n\r\n**Another example:** You might have a timeout that runs under a certain condition. In this case a cleanup\r\nhas to be done in a separate `useEffect` call that cleans everything up (but only on unmount).\r\n\r\n#### Before\r\n\r\n```jsx harmony\r\nimport { useEffect } from 'react'\r\n\r\nconst TimeoutRenderer = ({ depA, depB }) => {\r\n const [output, setOutput] = useState(null)\r\n const timeoutId = useRef(null)\r\n\r\n useEffect(() => {\r\n if (depA && depB) {\r\n timeoutId.current = setTimeout(() => setOutput('Hello World'), 1000)\r\n }\r\n }, [depA, depB])\r\n\r\n useEffect(() => {\r\n return function onUnmount() {\r\n if (timeoutId.current !== null) {\r\n clearTimeout(timeoutId.current)\r\n }\r\n }\r\n }, [timeoutId])\r\n\r\n return output ? (\r\n