Reactで、長押しで実行するボタンを作る方法

// mousedown と mouseup だけで作った、うまくいかない例
import { useRef } from 'react';

export function NaiveButton({ onLongPress }: { onLongPress: () => void }) {
  const timer = useRef<number | undefined>(undefined);
  return (
    <button
      type="button"
      onMouseDown={() => {
        timer.current = window.setTimeout(onLongPress, 800);
      }}
      onMouseUp={() => clearTimeout(timer.current)}
    >
      長押しで削除
    </button>
  );
}

// 長押しを検出するフック
import { useCallback, useEffect, useRef, useState } from 'react';
import type { KeyboardEvent, PointerEvent } from 'react';

type Options = {
  onLongPress: () => void;
  delay?: number; // 何ミリ秒押し続けたら実行するか
};

export function useLongPress({ onLongPress, delay = 800 }: Options) {
  const [pressing, setPressing] = useState(false);
  const timer = useRef<number | null>(null);
  // タイマーが切れたときに、最新の onLongPress を呼ぶ
  const callback = useRef(onLongPress);
  useEffect(() => {
    callback.current = onLongPress;
  });

  const cancel = useCallback(() => {
    if (timer.current !== null) {
      clearTimeout(timer.current);
      timer.current = null;
    }
    setPressing(false);
  }, []);

  const start = useCallback(() => {
    if (timer.current !== null) return; // 押している途中なら何もしない
    setPressing(true);
    timer.current = window.setTimeout(() => {
      timer.current = null;
      setPressing(false);
      callback.current();
    }, delay);
  }, [delay]);

  // 押している途中でコンポーネントが消えたら、タイマーを止める
  useEffect(() => cancel, [cancel]);

  const isActivationKey = (e: KeyboardEvent) => e.key === ' ' || e.key === 'Enter';

  return {
    pressing,
    handlers: {
      onPointerDown: (e: PointerEvent<HTMLElement>) => {
        if (e.button !== 0) return; // 右クリックなどは無視する
        start();
      },
      onPointerUp: cancel,
      onPointerLeave: cancel,
      onPointerCancel: cancel,
      onKeyDown: (e: KeyboardEvent) => {
        if (!isActivationKey(e) || e.repeat) return; // キーの自動リピートは無視する
        start();
      },
      onKeyUp: (e: KeyboardEvent) => {
        if (isActivationKey(e)) cancel();
      },
      onBlur: cancel,
    },
  };
}

// 長押しで実行するボタン
import type { CSSProperties, ReactNode } from 'react';
import { useLongPress } from './useLongPress';

type Props = {
  onLongPress: () => void;
  delay?: number;
  children: ReactNode;
};

export function LongPressButton({ onLongPress, delay = 800, children }: Props) {
  const { pressing, handlers } = useLongPress({ onLongPress, delay });
  return (
    <button
      type="button"
      className={pressing ? 'long-press pressing' : 'long-press'}
      style={{ '--delay': `${delay}ms` } as CSSProperties}
      {...handlers}
    >
      <span className="fill" aria-hidden="true" />
      <span className="label">{children}</span>
    </button>
  );
}

.long-press {
  position: relative;
  overflow: hidden;
  padding: 12px 24px;
  font-size: 16px;
  border: 2px solid #d85878;
  border-radius: 8px;
  background: #fff;
  color: #1f2a30;
  user-select: none; /* 長押しで文字が選ばれないようにする */
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* iOS の長押しメニューを出さない */
}
.long-press .fill {
  position: absolute;
  inset: 0;
  background: #ffd6e0;
  transform: scaleX(0);
  transform-origin: left;
}
.long-press.pressing .fill {
  animation: long-press-fill var(--delay) linear forwards;
}
.long-press .label {
  position: relative; /* 塗りの上に文字を出す */
}
@keyframes long-press-fill {
  to { transform: scaleX(1); }
}