reactuals/dist/hooks/useClickAndHold.js

A useful package providing a collection of 50+ React hooks and utilities to simplify React development.

import { useRef, useEffect } from "react";
/**
 * Triggers a callback after user holds mouse down for delay.
 *
 * Example:
 * const ref = useClickAndHold(() => console.log("Held!"), 1000);
 * return <button ref={ref}>Hold Me</button>;
 */
export function useClickAndHold(callback, delay = 1000) {
    const ref = useRef(null);
    useEffect(() => {
        const node = ref.current;
        if (!node)
            return;
        let timer;
        const start = () => (timer = setTimeout(callback, delay));
        const cancel = () => clearTimeout(timer);
        node.addEventListener("mousedown", start);
        node.addEventListener("mouseup", cancel);
        node.addEventListener("mouseleave", cancel);
        return () => {
            node.removeEventListener("mousedown", start);
            node.removeEventListener("mouseup", cancel);
            node.removeEventListener("mouseleave", cancel);
        };
    }, [callback, delay]);
    return ref;
}