useMashing

指定した回数連打されたときにコールバックを呼び出すReactカスタムフックです。

A React hook for detecting multiple repeated clicks/taps within a specified time interval.

Installation

npm install use-mashing

Usage

import { useMashing } from "use-mashing";

function MyComponent() {
  const handlers = useMashing(
    (event) => {
      console.log("3回連打されました！");
    },
    3, // 連打とみなす回数
    {
      interval: 300, // 連打とみなす間隔の最大値（ミリ秒）
      onStart: (event) => console.log("連打開始"),
      onCancel: (event) => console.log("連打キャンセル（遅すぎた）"),
    }
  );

  return <button {...handlers}>3回クリックしてね！</button>;
}

API

useMashing(callback, repeatCount, options)

Parameters

• callback: (event: React.MouseEvent | React.TouchEvent) => void
  • 指定回数の連打が検出されたときに呼び出される関数
• repeatCount: number
  • 連打とみなす回数（必須）
• options: object (optional)
  • interval: number - 連打とみなす間隔の最大値（ミリ秒、デフォルト: 300）
  • onStart: (event) => void - 新しい連打シーケンスが始まったときのコールバック
  • onCancel: (event) => void - 連打がキャンセルされたとき（タイムアウト）のコールバック

Returns

onMouseDownとonTouchStartハンドラーを含むオブジェクト。任意の要素にスプレッド展開できます。

Features

• マウスクリックとタッチ操作の両方に対応
• TypeScript完全対応
• 軽量（依存関係なし）
• React 16.8以上で動作

Demo

👉 Try it here: https://nakataki17.github.io/useMashing/

License

MIT