struct-ui-components/src/hooks/useLongPress/useLongPress.ts

A collection of reusable, customizable React components built with TypeScript, Tailwind CSS, and Storybook. Designed for modern UI development with flexibility and scalability.

import type { RefObject } from "react";
import { useEffectOnce, useEventListener, useTimeout } from "../";

interface LongPressOptions {
  delay?: number;
}

export const useLongPress = (
  ref: RefObject<HTMLElement>,
  cb: () => void,
  { delay = 250 }: LongPressOptions = {},
): void => {
  const { reset, clear } = useTimeout(cb, delay);
  useEffectOnce(clear);

  useEventListener("mousedown", reset, ref.current);
  useEventListener("touchstart", reset, ref.current);

  useEventListener("mouseup", clear, ref.current);
  useEventListener("mouseleave", clear, ref.current);
  useEventListener("touchend", clear, ref.current);
};