UNPKG

@restart/hooks

Version:

A set of utility and general-purpose React hooks.

62 lines (60 loc) 1.94 kB
/** * Creates a `setInterval` that is properly cleaned up when a component unmounted * * ```tsx * function Timer() { * const [timer, setTimer] = useState(0) * useInterval(() => setTimer(i => i + 1), 1000) * * return <span>{timer} seconds past</span> * } * ``` * * @param fn an function run on each interval * @param ms The milliseconds duration of the interval */ declare function useInterval(fn: () => void, ms: number): void; /** * Creates a pausable `setInterval` that is properly cleaned up when a component unmounted * * ```tsx * const [paused, setPaused] = useState(false) * const [timer, setTimer] = useState(0) * * useInterval(() => setTimer(i => i + 1), 1000, paused) * * return ( * <span> * {timer} seconds past * * <button onClick={() => setPaused(p => !p)}>{paused ? 'Play' : 'Pause' }</button> * </span> * ) * ``` * * @param fn an function run on each interval * @param ms The milliseconds duration of the interval * @param paused Whether or not the interval is currently running */ declare function useInterval(fn: () => void, ms: number, paused: boolean): void; /** * Creates a pausable `setInterval` that _fires_ immediately and is * properly cleaned up when a component unmounted * * ```tsx * const [timer, setTimer] = useState(-1) * useInterval(() => setTimer(i => i + 1), 1000, false, true) * * // will update to 0 on the first effect * return <span>{timer} seconds past</span> * ``` * * @param fn an function run on each interval * @param ms The milliseconds duration of the interval * @param paused Whether or not the interval is currently running * @param runImmediately Whether to run the function immediately on mount or unpause * rather than waiting for the first interval to elapse * */ declare function useInterval(fn: () => void, ms: number, paused: boolean, runImmediately: boolean): void; export default useInterval;