[IMPL] useDoubleClick hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useDoubleClick/UseDoubleClick.tsx

@@ -0,0 +1,22 @@
+import { useCallback, useState } from "react";
+import { useDoubleClick } from "../../../../../../packages/react-tools/src"
+
+/**
+The component renders a tag p with __message__ state variable and a button which has an onClick handler. Its handler is __handler__, the returned function of _useDoubleClick_ hook that set __message__ value in different way by click type.
+ */
+export const UseDoubleClick = () => {
+	const [message, setMessage] = useState("");
+	const handler = useDoubleClick({
+		doubleClick: useCallback(() => {
+			setMessage("Double click executed.")
+		}, []),
+		singleClick: useCallback(() => {
+			setMessage("Single click executed.")
+		}, [])
+	});
+
+	return <div>
+		<p>Message: {message}</p>
+		<button onClick={handler}>Click/DoubleClick</button>
+	</div>
+}

apps/react-tools-demo/src/constants/components.ts

@@ -60,7 +60,8 @@ export const COMPONENTS = [
 			"useScrollIntoView",
 			"useMouse",
 			"useLongPress",
-			"useBeforeUnload"
+			"useBeforeUnload",
+			"useDoubleClick"
 		],
 		//API DOM
 		[

apps/react-tools-demo/src/markdown/useDoubleClick.md

@@ -0,0 +1,51 @@
+# useDoubleClick
+Hook to handle double click event. Double clicking in react as well as with vanilla js, it is possible to manage it but it is not possible to have both managers on the same element. Thanks to this hook it is possible to do this, and it works with all events that can be associated with a user click (for example _mousedown_ but also _touchstart_).
+
+## Usage
+
+```tsx
+export const UseDoubleClick = () => {
+	const [message, setMessage] = useState("");
+	const handler = useDoubleClick({
+		doubleClick: useCallback(() => {
+			setMessage("Double click executed.")
+		}, []),
+		singleClick: useCallback(() => {
+			setMessage("Single click executed.")
+		}, [])
+	});
+
+	return <div>
+		<p>Message: {message}</p>
+		<button onClick={handler}>Click/DoubleClick</button>
+	</div>
+}
+```
+
+> The component renders a tag p with __message__ state variable and a button which has an onClick handler. Its handler is __handler__, the returned function of _useDoubleClick_ hook that set __message__ value in different way by click type.
+
+
+## API
+
+```tsx
+useDoubleClick <T extends Element = Element, E extends Event = Event>(handler: ((evt: SyntheticEvent<T, E>) => Promise<void> | void) | { doubleClick: (evt: SyntheticEvent<T, E>) => Promise<void> | void, singleClick?: (evt: SyntheticEvent<T, E>) => Promise<void> | void, tolerance?: number }) 
+```
+
+> ### Params
+>
+> - __handler__: _((evt: SyntheticEvent<T, E>) => Promise<void>|void)|Object_
+> - __handler.doubleClick__: _((evt: SyntheticEvent<T, E>) => Promise<void> | void)_  
+callback executed on double click.
+> - __handler.singleClick?__: _((evt: SyntheticEvent<T, E>) => Promise<void> | void)_  
+callback executed on single click.
+> - __handler.tolerance=150?__: _number_  
+delay to execute __singleClick__ callback.
+>
+
+> ### Returns
+>
+> __callback__
+> - __Union of__:  
+>     - _((evt: SyntheticEvent<T, E>) => Promise<void>_  
+>     - _void)_  
+>

packages/react-tools/README.md

@@ -65,6 +65,7 @@
 	- [x] useScrollIntoView
 	- [x] useMouse
 	- [x] useLongPress
+	- [ ] useDoubleClick
 	- [x] useBeforeUnload
 	- [ ] useOrientation
 	- [ ] useKeysEvents

packages/react-tools/src/hooks/index.ts

@@ -65,4 +65,5 @@ export { useGeolocation } from './useGeolocation';
 export { useShare } from './useShare';
 export { useEyeDropper } from './useEyeDropper';
 export { useDialogBox } from './useDialogBox';
-export { useBeforeUnload } from './useBeforeUnload';
+export { useBeforeUnload } from './useBeforeUnload';
+export { useDoubleClick } from './useDoubleClick';

packages/react-tools/src/hooks/useDoubleClick.ts

@@ -0,0 +1,33 @@
+import { SyntheticEvent, useCallback, useRef } from "react";
+
+/**
+ * **`useDoubleClick`**: hook to handle double click event. Double clicking in react as well as with vanilla js, it is possible to manage it but it is not possible to have both managers on the same element. Thanks to this hook it is possible to do this, and it works with all events that can be associated with a user click (for example _mousedown_ but also _touchstart_).
+ * @param {((evt: SyntheticEvent<T, E>) => Promise<void>|void)|Object} handler
+ * @param {((evt: SyntheticEvent<T, E>) => Promise<void> | void)} handler.doubleClick - callback executed on double click.
+ * @param {((evt: SyntheticEvent<T, E>) => Promise<void> | void)} [handler.singleClick] - callback executed on single click.
+ * @param {number} [handler.tolerance=300] - delay to execute __singleClick__ callback.
+ * @returns {((evt: SyntheticEvent<T, E>) => Promise<void> | void)} callback
+ */
+export const useDoubleClick = <T extends Element = Element, E extends Event = Event>(handler: ((evt: SyntheticEvent<T, E>) => Promise<void> | void) | { doubleClick: (evt: SyntheticEvent<T, E>) => Promise<void> | void, singleClick?: (evt: SyntheticEvent<T, E>) => Promise<void> | void, tolerance?: number }) => {
+	const count = useRef(0);
+	const tolerance = useRef("tolerance" in handler ? handler.tolerance : 300);
+	const idTimeout = useRef<number>();
+
+	return useCallback((evt: SyntheticEvent<T, E>) => {
+		"persist" in evt && evt.persist();
+		!!idTimeout.current && clearTimeout(idTimeout.current);
+		count.current++;
+		if (count.current === 1 && "singleClick" in handler && !!handler.singleClick) {
+			idTimeout.current = setTimeout(() => {
+				handler.singleClick!(evt);
+				count.current = 0;
+			}, tolerance.current) as unknown as number;
+		}
+		if (count.current === 2) {
+			"doubleClick" in handler
+				? handler.doubleClick(evt)
+				: handler(evt);
+			count.current = 0;
+		}
+	}, [handler]);
+}

packages/react-tools/src/index.ts

@@ -81,7 +81,8 @@ export {
 	useShare,
 	useEyeDropper,
 	useDialogBox,
-	useBeforeUnload
+	useBeforeUnload,
+	useDoubleClick
 } from './hooks'
 
 export {