use-mashing 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 nakataki
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,63 @@
+# useMashing
+
+指定した回数連打されたときにコールバックを呼び出すReactカスタムフックです。
+
+A React hook for detecting multiple repeated clicks/taps within a specified time interval.
+
+## Installation
+
+```bash
+npm install use-mashing
+```
+
+## Usage
+
+```tsx
+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以上で動作
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare function useMashing(callback: (event: React.MouseEvent | React.TouchEvent) => void, repeatCount: number, // 連打とみなす回数（必須）
+options?: {
+    interval?: number;
+    onStart?: (event: React.MouseEvent | React.TouchEvent) => void;
+    onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;
+}): {};
+
+export { useMashing };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare function useMashing(callback: (event: React.MouseEvent | React.TouchEvent) => void, repeatCount: number, // 連打とみなす回数（必須）
+options?: {
+    interval?: number;
+    onStart?: (event: React.MouseEvent | React.TouchEvent) => void;
+    onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;
+}): {};
+
+export { useMashing };

package/dist/index.js

@@ -0,0 +1,104 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  useMashing: () => useMashing
+});
+module.exports = __toCommonJS(index_exports);
+var React = __toESM(require("react"));
+var isMouseEvent = (event) => {
+  return "button" in event;
+};
+var isTouchEvent = (event) => {
+  return "touches" in event;
+};
+function useMashing(callback, repeatCount, options = {}) {
+  const { interval = 300, onStart, onCancel } = options;
+  const lastClickTimeRef = React.useRef(null);
+  const clickCountRef = React.useRef(0);
+  const resetTimerRef = React.useRef(null);
+  return React.useMemo(() => {
+    if (typeof callback !== "function") {
+      return {};
+    }
+    const handleClick = (event) => {
+      if (!isMouseEvent(event) && !isTouchEvent(event)) return;
+      const currentTime = Date.now();
+      const lastClickTime = lastClickTimeRef.current;
+      if (lastClickTime !== null && currentTime - lastClickTime <= interval) {
+        clickCountRef.current += 1;
+        if (clickCountRef.current >= repeatCount) {
+          callback(event);
+          clickCountRef.current = 0;
+          lastClickTimeRef.current = null;
+          if (resetTimerRef.current) {
+            window.clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = null;
+          }
+          return;
+        }
+      } else {
+        clickCountRef.current = 1;
+        if (onStart) {
+          onStart(event);
+        }
+      }
+      lastClickTimeRef.current = currentTime;
+      if (resetTimerRef.current) {
+        window.clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = window.setTimeout(() => {
+        if (clickCountRef.current > 0 && clickCountRef.current < repeatCount) {
+          if (onCancel) {
+            onCancel(event);
+          }
+        }
+        clickCountRef.current = 0;
+        lastClickTimeRef.current = null;
+      }, interval);
+    };
+    const mouseHandlers = {
+      onMouseDown: handleClick
+    };
+    const touchHandlers = {
+      onTouchStart: handleClick
+    };
+    return {
+      ...mouseHandlers,
+      ...touchHandlers
+    };
+  }, [callback, repeatCount, interval, onStart, onCancel]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useMashing
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst isMouseEvent = (\n  event: React.MouseEvent | React.TouchEvent\n): event is React.MouseEvent => {\n  return \"button\" in event;\n};\n\nconst isTouchEvent = (\n  event: React.MouseEvent | React.TouchEvent\n): event is React.TouchEvent => {\n  return \"touches\" in event;\n};\n\n/* 指定回数連打されたときにcallbackを呼び出す */\nexport function useMashing(\n  callback: (event: React.MouseEvent | React.TouchEvent) => void,\n  repeatCount: number, // 連打とみなす回数（必須）\n  options: {\n    interval?: number; // 連打とみなす間隔の最大値（ミリ秒）\n    onStart?: (event: React.MouseEvent | React.TouchEvent) => void;\n    onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;\n  } = {}\n) {\n  const { interval = 300, onStart, onCancel } = options;\n\n  // 更新されても再レンダリングを発火させたくないのでuseStateは使わない\n  const lastClickTimeRef = React.useRef<number | null>(null);\n  const clickCountRef = React.useRef<number>(0);\n  const resetTimerRef = React.useRef<number | null>(null);\n\n  return React.useMemo(() => {\n    if (typeof callback !== \"function\") {\n      return {};\n    }\n\n    const handleClick = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) return;\n\n      const currentTime = Date.now();\n      const lastClickTime = lastClickTimeRef.current;\n\n      // 前回のクリックとの間隔をチェック\n      if (lastClickTime !== null && currentTime - lastClickTime <= interval) {\n        // 連打継続中\n        clickCountRef.current += 1;\n\n        // 指定回数に達したらcallbackを呼び出す\n        if (clickCountRef.current >= repeatCount) {\n          callback(event);\n          // カウントをリセット\n          clickCountRef.current = 0;\n          lastClickTimeRef.current = null;\n          if (resetTimerRef.current) {\n            window.clearTimeout(resetTimerRef.current);\n            resetTimerRef.current = null;\n          }\n          return;\n        }\n      } else {\n        // 新しい連打シーケンスの開始\n        clickCountRef.current = 1;\n        if (onStart) {\n          onStart(event);\n        }\n      }\n\n      // 現在のクリック時刻を記録\n      lastClickTimeRef.current = currentTime;\n\n      // 既存のリセットタイマーをクリア\n      if (resetTimerRef.current) {\n        window.clearTimeout(resetTimerRef.current);\n      }\n\n      // interval経過後にカウントをリセット\n      resetTimerRef.current = window.setTimeout(() => {\n        if (clickCountRef.current > 0 && clickCountRef.current < repeatCount) {\n          if (onCancel) {\n            onCancel(event);\n          }\n        }\n        clickCountRef.current = 0;\n        lastClickTimeRef.current = null;\n      }, interval);\n    };\n\n    const mouseHandlers = {\n      onMouseDown: handleClick,\n    };\n\n    const touchHandlers = {\n      onTouchStart: handleClick,\n    };\n\n    return {\n      ...mouseHandlers,\n      ...touchHandlers,\n    };\n  }, [callback, repeatCount, interval, onStart, onCancel]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AAEvB,IAAM,eAAe,CACnB,UAC8B;AAC9B,SAAO,YAAY;AACrB;AAEA,IAAM,eAAe,CACnB,UAC8B;AAC9B,SAAO,aAAa;AACtB;AAGO,SAAS,WACd,UACA,aACA,UAII,CAAC,GACL;AACA,QAAM,EAAE,WAAW,KAAK,SAAS,SAAS,IAAI;AAG9C,QAAM,mBAAyB,aAAsB,IAAI;AACzD,QAAM,gBAAsB,aAAe,CAAC;AAC5C,QAAM,gBAAsB,aAAsB,IAAI;AAEtD,SAAa,cAAQ,MAAM;AACzB,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,cAAc,CAAC,UAA+C;AAClE,UAAI,CAAC,aAAa,KAAK,KAAK,CAAC,aAAa,KAAK,EAAG;AAElD,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,gBAAgB,iBAAiB;AAGvC,UAAI,kBAAkB,QAAQ,cAAc,iBAAiB,UAAU;AAErE,sBAAc,WAAW;AAGzB,YAAI,cAAc,WAAW,aAAa;AACxC,mBAAS,KAAK;AAEd,wBAAc,UAAU;AACxB,2BAAiB,UAAU;AAC3B,cAAI,cAAc,SAAS;AACzB,mBAAO,aAAa,cAAc,OAAO;AACzC,0BAAc,UAAU;AAAA,UAC1B;AACA;AAAA,QACF;AAAA,MACF,OAAO;AAEL,sBAAc,UAAU;AACxB,YAAI,SAAS;AACX,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AAGA,uBAAiB,UAAU;AAG3B,UAAI,cAAc,SAAS;AACzB,eAAO,aAAa,cAAc,OAAO;AAAA,MAC3C;AAGA,oBAAc,UAAU,OAAO,WAAW,MAAM;AAC9C,YAAI,cAAc,UAAU,KAAK,cAAc,UAAU,aAAa;AACpE,cAAI,UAAU;AACZ,qBAAS,KAAK;AAAA,UAChB;AAAA,QACF;AACA,sBAAc,UAAU;AACxB,yBAAiB,UAAU;AAAA,MAC7B,GAAG,QAAQ;AAAA,IACb;AAEA,UAAM,gBAAgB;AAAA,MACpB,aAAa;AAAA,IACf;AAEA,UAAM,gBAAgB;AAAA,MACpB,cAAc;AAAA,IAChB;AAEA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,aAAa,UAAU,SAAS,QAAQ,CAAC;AACzD;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,69 @@
+// src/index.ts
+import * as React from "react";
+var isMouseEvent = (event) => {
+  return "button" in event;
+};
+var isTouchEvent = (event) => {
+  return "touches" in event;
+};
+function useMashing(callback, repeatCount, options = {}) {
+  const { interval = 300, onStart, onCancel } = options;
+  const lastClickTimeRef = React.useRef(null);
+  const clickCountRef = React.useRef(0);
+  const resetTimerRef = React.useRef(null);
+  return React.useMemo(() => {
+    if (typeof callback !== "function") {
+      return {};
+    }
+    const handleClick = (event) => {
+      if (!isMouseEvent(event) && !isTouchEvent(event)) return;
+      const currentTime = Date.now();
+      const lastClickTime = lastClickTimeRef.current;
+      if (lastClickTime !== null && currentTime - lastClickTime <= interval) {
+        clickCountRef.current += 1;
+        if (clickCountRef.current >= repeatCount) {
+          callback(event);
+          clickCountRef.current = 0;
+          lastClickTimeRef.current = null;
+          if (resetTimerRef.current) {
+            window.clearTimeout(resetTimerRef.current);
+            resetTimerRef.current = null;
+          }
+          return;
+        }
+      } else {
+        clickCountRef.current = 1;
+        if (onStart) {
+          onStart(event);
+        }
+      }
+      lastClickTimeRef.current = currentTime;
+      if (resetTimerRef.current) {
+        window.clearTimeout(resetTimerRef.current);
+      }
+      resetTimerRef.current = window.setTimeout(() => {
+        if (clickCountRef.current > 0 && clickCountRef.current < repeatCount) {
+          if (onCancel) {
+            onCancel(event);
+          }
+        }
+        clickCountRef.current = 0;
+        lastClickTimeRef.current = null;
+      }, interval);
+    };
+    const mouseHandlers = {
+      onMouseDown: handleClick
+    };
+    const touchHandlers = {
+      onTouchStart: handleClick
+    };
+    return {
+      ...mouseHandlers,
+      ...touchHandlers
+    };
+  }, [callback, repeatCount, interval, onStart, onCancel]);
+}
+export {
+  useMashing
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import * as React from \"react\";\n\nconst isMouseEvent = (\n  event: React.MouseEvent | React.TouchEvent\n): event is React.MouseEvent => {\n  return \"button\" in event;\n};\n\nconst isTouchEvent = (\n  event: React.MouseEvent | React.TouchEvent\n): event is React.TouchEvent => {\n  return \"touches\" in event;\n};\n\n/* 指定回数連打されたときにcallbackを呼び出す */\nexport function useMashing(\n  callback: (event: React.MouseEvent | React.TouchEvent) => void,\n  repeatCount: number, // 連打とみなす回数（必須）\n  options: {\n    interval?: number; // 連打とみなす間隔の最大値（ミリ秒）\n    onStart?: (event: React.MouseEvent | React.TouchEvent) => void;\n    onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;\n  } = {}\n) {\n  const { interval = 300, onStart, onCancel } = options;\n\n  // 更新されても再レンダリングを発火させたくないのでuseStateは使わない\n  const lastClickTimeRef = React.useRef<number | null>(null);\n  const clickCountRef = React.useRef<number>(0);\n  const resetTimerRef = React.useRef<number | null>(null);\n\n  return React.useMemo(() => {\n    if (typeof callback !== \"function\") {\n      return {};\n    }\n\n    const handleClick = (event: React.MouseEvent | React.TouchEvent) => {\n      if (!isMouseEvent(event) && !isTouchEvent(event)) return;\n\n      const currentTime = Date.now();\n      const lastClickTime = lastClickTimeRef.current;\n\n      // 前回のクリックとの間隔をチェック\n      if (lastClickTime !== null && currentTime - lastClickTime <= interval) {\n        // 連打継続中\n        clickCountRef.current += 1;\n\n        // 指定回数に達したらcallbackを呼び出す\n        if (clickCountRef.current >= repeatCount) {\n          callback(event);\n          // カウントをリセット\n          clickCountRef.current = 0;\n          lastClickTimeRef.current = null;\n          if (resetTimerRef.current) {\n            window.clearTimeout(resetTimerRef.current);\n            resetTimerRef.current = null;\n          }\n          return;\n        }\n      } else {\n        // 新しい連打シーケンスの開始\n        clickCountRef.current = 1;\n        if (onStart) {\n          onStart(event);\n        }\n      }\n\n      // 現在のクリック時刻を記録\n      lastClickTimeRef.current = currentTime;\n\n      // 既存のリセットタイマーをクリア\n      if (resetTimerRef.current) {\n        window.clearTimeout(resetTimerRef.current);\n      }\n\n      // interval経過後にカウントをリセット\n      resetTimerRef.current = window.setTimeout(() => {\n        if (clickCountRef.current > 0 && clickCountRef.current < repeatCount) {\n          if (onCancel) {\n            onCancel(event);\n          }\n        }\n        clickCountRef.current = 0;\n        lastClickTimeRef.current = null;\n      }, interval);\n    };\n\n    const mouseHandlers = {\n      onMouseDown: handleClick,\n    };\n\n    const touchHandlers = {\n      onTouchStart: handleClick,\n    };\n\n    return {\n      ...mouseHandlers,\n      ...touchHandlers,\n    };\n  }, [callback, repeatCount, interval, onStart, onCancel]);\n}\n"],"mappings":";AAAA,YAAY,WAAW;AAEvB,IAAM,eAAe,CACnB,UAC8B;AAC9B,SAAO,YAAY;AACrB;AAEA,IAAM,eAAe,CACnB,UAC8B;AAC9B,SAAO,aAAa;AACtB;AAGO,SAAS,WACd,UACA,aACA,UAII,CAAC,GACL;AACA,QAAM,EAAE,WAAW,KAAK,SAAS,SAAS,IAAI;AAG9C,QAAM,mBAAyB,aAAsB,IAAI;AACzD,QAAM,gBAAsB,aAAe,CAAC;AAC5C,QAAM,gBAAsB,aAAsB,IAAI;AAEtD,SAAa,cAAQ,MAAM;AACzB,QAAI,OAAO,aAAa,YAAY;AAClC,aAAO,CAAC;AAAA,IACV;AAEA,UAAM,cAAc,CAAC,UAA+C;AAClE,UAAI,CAAC,aAAa,KAAK,KAAK,CAAC,aAAa,KAAK,EAAG;AAElD,YAAM,cAAc,KAAK,IAAI;AAC7B,YAAM,gBAAgB,iBAAiB;AAGvC,UAAI,kBAAkB,QAAQ,cAAc,iBAAiB,UAAU;AAErE,sBAAc,WAAW;AAGzB,YAAI,cAAc,WAAW,aAAa;AACxC,mBAAS,KAAK;AAEd,wBAAc,UAAU;AACxB,2BAAiB,UAAU;AAC3B,cAAI,cAAc,SAAS;AACzB,mBAAO,aAAa,cAAc,OAAO;AACzC,0BAAc,UAAU;AAAA,UAC1B;AACA;AAAA,QACF;AAAA,MACF,OAAO;AAEL,sBAAc,UAAU;AACxB,YAAI,SAAS;AACX,kBAAQ,KAAK;AAAA,QACf;AAAA,MACF;AAGA,uBAAiB,UAAU;AAG3B,UAAI,cAAc,SAAS;AACzB,eAAO,aAAa,cAAc,OAAO;AAAA,MAC3C;AAGA,oBAAc,UAAU,OAAO,WAAW,MAAM;AAC9C,YAAI,cAAc,UAAU,KAAK,cAAc,UAAU,aAAa;AACpE,cAAI,UAAU;AACZ,qBAAS,KAAK;AAAA,UAChB;AAAA,QACF;AACA,sBAAc,UAAU;AACxB,yBAAiB,UAAU;AAAA,MAC7B,GAAG,QAAQ;AAAA,IACb;AAEA,UAAM,gBAAgB;AAAA,MACpB,aAAa;AAAA,IACf;AAEA,UAAM,gBAAgB;AAAA,MACpB,cAAc;AAAA,IAChB;AAEA,WAAO;AAAA,MACL,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,EACF,GAAG,CAAC,UAAU,aAAa,UAAU,SAAS,QAAQ,CAAC;AACzD;","names":[]}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "use-mashing",
+  "version": "1.0.0",
+  "description": "A hook for detecting multiple repeated clicks/taps",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "hooks",
+    "click",
+    "tap",
+    "multiple",
+    "repeat",
+    "mashing"
+  ],
+  "author": "nakataki",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nakataki/useMashing.git"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "prettier": "^3.7.4",
+    "react": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}