React Timing Hooks
- Several React hooks wrapping
- Additional utility hooks like
- Full Typescript support
- Lightweight (less than 1KB minzipped, no external dependencies)
# via npmnpm i react-timing-hooks# via yarnyarn add react-timing-hooks
import useState from 'react'import useAnimationFrameLoop from 'react-timing-hooks'const AnimationFrameCounter = depA depBconst count setCount =const stop setStop =return<div><p>count</p><button =>Stop counting</button></div>
Writing a timeout or anything similar requires a lot of boilerplate (if you don't do it quick and dirty). This library is supposed to give you easy access to those functionalities while keeping your code clean.
For example: You might have a timeout that runs under a certain condition. In this case a cleanup
has to be done in a separate
useEffect call that cleans everything up (but only on unmount).
Your code could look like this:
import useEffect from 'react'const TimeoutRenderer = depA depBconst output setOutput =const timeoutId =return output ?<div>output</div>: null
react-timing-hooks you can just write:
import useState from 'react'import useTimeoutEffect from 'react-timing-hooks'const TimeoutRenderer = depA depBconst output setOutput =return output ?<div>output</div>: null
In this case
react-timing-hooks automatically took care of cleaning up the timeout for you (if the component is mounted for less than a second for instance).