useLongpress Hook React

import { useState, useEffect } from "react";

const useLongPress = (callback, duration = 500) => {
  const [isPressed, setIsPressed] = useState(false);

  useEffect(() => {
    let timer;
    if (isPressed) {
      timer = setTimeout(callback, duration);
    } else {
      clearTimeout(timer);
    }

    return () => {
      clearTimeout(timer);
    };
  }, [isPressed, callback, duration]);

  return {
    onMouseDown: () => setIsPressed(true),
    onMouseUp: () => setIsPressed(false),
    onMouseLeave: () => setIsPressed(false),
    onTouchStart: () => setIsPressed(true),
    onTouchEnd: () => setIsPressed(false),
  };
};

// Usage
const LongPressExample = () => {
  const handleLongPress = () => {
    console.log("Long press detected.");
  };

  const longPressProps = useLongPress(handleLongPress);

  return (
    <div>
      <button {...longPressProps}>Long Press Me</button>
    </div>
  );
};