@mantine/hooks
Version:
A collection of 50+ hooks for state and UI management
54 lines (53 loc) • 1.5 kB
JavaScript
"use client";
let react = require("react");
//#region packages/@mantine/hooks/src/use-interval/use-interval.ts
function useInterval(fn, interval, { autoInvoke = false } = {}) {
const [active, setActive] = (0, react.useState)(false);
const intervalRef = (0, react.useRef)(null);
const fnRef = (0, react.useRef)(null);
const intervalValueRef = (0, react.useRef)(interval);
intervalValueRef.current = interval;
const start = (0, react.useCallback)(() => {
setActive((old) => {
if (!old && !intervalRef.current) intervalRef.current = window.setInterval(fnRef.current, intervalValueRef.current);
return true;
});
}, []);
const stop = (0, react.useCallback)(() => {
setActive(false);
if (intervalRef.current) window.clearInterval(intervalRef.current);
intervalRef.current = null;
}, []);
const toggle = (0, react.useCallback)(() => {
setActive((current) => {
if (current) {
if (intervalRef.current) window.clearInterval(intervalRef.current);
intervalRef.current = null;
return false;
}
if (!intervalRef.current) intervalRef.current = window.setInterval(fnRef.current, intervalValueRef.current);
return true;
});
}, []);
(0, react.useEffect)(() => {
fnRef.current = fn;
active && start();
return stop;
}, [
fn,
active,
interval
]);
(0, react.useEffect)(() => {
if (autoInvoke) start();
}, []);
return {
start,
stop,
toggle,
active
};
}
//#endregion
exports.useInterval = useInterval;
//# sourceMappingURL=use-interval.cjs.map