Add timeout option.

CHANGELOG.md

@@ -3,6 +3,10 @@
 This project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 1.1.0 - 2019-03-10
+
+- Add `timeout` option.
+
 ## 1.0.1 - 2019-03-09
 
 - Move react to peer-dependency.

README.md

@@ -60,6 +60,8 @@ The `useMouseDown` and `useMouseUp` are both a shortcut to respectively set the
 - `up` (default: `false`): If the element should listen to mouseup event.
 - `touch` (default: `true`): If the element should listen to touch equivalent
 events.
+- `timeout` (default: `10`): Short timeout in milliseconds to prevents multiple
+events.
 
 You can provide functions that should listen to each event with theses options:
 

example/src/index.jsx

@@ -29,16 +29,18 @@ const DropDown = () => {
   const props = useMouseDown(() => setOpen(state => !state));
 
   return (
-    <div className="dropdown">
-      <button type="button" {...props}>
-        Open drop-down
-      </button>
-      <ul style={{ display: open ? 'block' : 'none' }}>
-        <DropDownItem handleClick={() => setOpen(false)}>Action #1</DropDownItem>
-        <DropDownItem handleClick={() => setOpen(false)}>Action #2</DropDownItem>
-        <DropDownItem handleClick={() => setOpen(false)}>Action #3</DropDownItem>
-      </ul>
-    </div>
+    <>
+      <div className="dropdown">
+        <button type="button" {...props}>
+          Open drop-down
+        </button>
+        <ul style={{ display: open ? 'block' : 'none' }}>
+          <DropDownItem handleClick={() => setOpen(false)}>Action #1</DropDownItem>
+          <DropDownItem handleClick={() => setOpen(false)}>Action #2</DropDownItem>
+          <DropDownItem handleClick={() => setOpen(false)}>Action #3</DropDownItem>
+        </ul>
+      </div>
+    </>
   );
 };
 

example/style.css

@@ -90,6 +90,7 @@ pre {
   text-align: left;
   border: none;
   cursor: pointer;
+  background-color: white;
   transition: 0.12s;
 }
 .dropdown ul li button:hover {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-mouse-action",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React Hooks to listen to both mouse down or up and click events with a once called function.",
   "author": "Dimitri NICOLAS <dimitri@ooeo.fr>",
   "license": "MIT",

src/index.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { HooksInput } from './types/options';
 import { IProps } from './types/props';
 
-const DEFAULT_OPTIONS = { down: false, up: false, touch: true };
+const DEFAULT_OPTIONS = { down: false, up: false, touch: true, timeout: 10 };
 
 /**
  * Test if a mouse event can trigger a click.
@@ -26,6 +26,7 @@ export const useMouseAction = (options: HooksInput): IProps => {
     down,
     up,
     touch,
+    timeout,
     onClick,
     onMouseDown,
     onMouseUp,
@@ -52,7 +53,7 @@ export const useMouseAction = (options: HooksInput): IProps => {
    *
    */
   const onMouseDownEnd = () => {
-    setTimeout(() => setMouseDown(false), 10);
+    setTimeout(() => setMouseDown(false), timeout);
   };
 
   /**
@@ -71,7 +72,7 @@ export const useMouseAction = (options: HooksInput): IProps => {
    */
   const onMouseUpTriggered = () => {
     setMouseUpTriggered(true);
-    setTimeout(() => setMouseUpTriggered(false), 10);
+    setTimeout(() => setMouseUpTriggered(false), timeout);
   };
 
   /**
@@ -199,7 +200,7 @@ export const useMouseAction = (options: HooksInput): IProps => {
        * prevent next coming click event to be catched
        * by a newly rendered element above the button.
        */
-      setTimeout(() => onAction(event), 10);
+      setTimeout(() => onAction(event), timeout);
     }
   };
 
@@ -220,7 +221,7 @@ export const useMouseAction = (options: HooksInput): IProps => {
        * to be catched by a newly rendered element
        * above the button.
        */
-      setTimeout(() => onAction(event), 10);
+      setTimeout(() => onAction(event), timeout);
     }
   };
 

src/types/options.ts

@@ -32,6 +32,12 @@ interface IOptions {
    */
   touch?: boolean;
 
+  /**
+   * Short time to prevent multiple events.
+   * @default 10
+   */
+  timeout?: number;
+
   /**
    * Native click event handler passed into returned props.
    */