ClickAndHoldButton.tsx

import { ButtonHTMLAttributes, useRef, useEffect } from "react";

export function ClickAndHoldButton({
  action,
  delay = 500,
  loopDuration = 100,
  ...rest
}: {
  action: () => void;
  delay?: number;
  loopDuration?: number;
} & ButtonHTMLAttributes<HTMLButtonElement>) {
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);
  useEffect(() => {
    return () => clearTimeout(timeoutRef.current);
  }, []);

  const actionRef = useRef(action);
  useEffect(() => {
    actionRef.current = action;
  }, [action]);

  const performAction = () => {
    actionRef.current();
    timeoutRef.current = setTimeout(performAction, loopDuration);
  };

  return (
    <button
      {...rest}
      onPointerDown={() => {
        action();
        timeoutRef.current = setTimeout(performAction, delay);
      }}
      onPointerUp={() => {
        clearTimeout(timeoutRef.current);
      }}
    />
  );
}