[ADD] useEventDispatcher hook

Author: nDriaDev

apps/react-tools-demo/src/components/hooks/useEventDispatcher/UseEventDispatcher.tsx

@@ -0,0 +1,38 @@
+import { BaseSyntheticEvent, useCallback, useRef, useState } from "react"
+import { useEventDispatcher, useEventListener } from "../../../../../../packages/react-tools/src/hooks"
+
+/**
+The component has:
+- A state variable.
+- An _inputRef_ ref variable attacched to an input element contained in a form.
+- An dispatch function returned from _useEventDispatcher_ with _inputRef_ as element.
+- An onSubmit function to handle form onSubmit that invokes _dispatch_ function with a CustomEvent("demo") which detail is valued with input value taken from onSubmit event.
+- A useEventListener of type _demo_, on element _inputRef_ and with a listener that takes CustomEvent and invokes setState with event detail.
+ */
+export const UseEventDispatcher = () => {
+	const [state, setState] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+	const dispatch = useEventDispatcher(inputRef);
+
+	const onSubmit = useCallback((e: BaseSyntheticEvent) => {
+		dispatch(new CustomEvent("demo", { detail: e.target[0].value }));
+		e.preventDefault();
+	}, [dispatch]);
+
+	useEventListener({
+		type: "demo",
+		element: inputRef,
+		listener: (evt) => {
+			setState((evt as CustomEvent<string>).detail);
+		},
+	});
+
+	return (<>
+		<em>State is: </em> {state}
+		<br />
+		<form noValidate onSubmit={onSubmit}>
+			<input type="text" ref={inputRef}/>
+		</form>
+	</>)
+
+}

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

@@ -18,6 +18,7 @@ export const COMPONENTS = [
 		"useLayoutEffectCompare",
 		"useLayoutEffectDeepCompare",
 		"usePubSubModel",
+		"useEventDispatcher",
 		"useEventListener"
 	],
 	[

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

@@ -0,0 +1,60 @@
+# useEventDispatcher
+Hook to dispatch an Event or a CustomEvent
+
+## Usage
+
+```tsx
+export const UseEventDispatcher = () => {
+	const [state, setState] = useState("");
+	const inputRef = useRef<HTMLInputElement>(null);
+	const dispatch = useEventDispatcher(inputRef);
+
+	const onSubmit = useCallback((e: BaseSyntheticEvent) => {
+		dispatch(new CustomEvent("demo", { detail: e.target[0].value }));
+		e.preventDefault();
+	}, [dispatch]);
+
+	useEventListener({
+		type: "demo",
+		element: inputRef,
+		listener: (evt) => {
+			setState((evt as CustomEvent<string>).detail);
+		},
+	});
+
+	return (<>
+		state is {state}
+		<br />
+		<form noValidate onSubmit={onSubmit}>
+			<input type="text" ref={inputRef}/>
+		</form>
+	</>)
+
+}
+```
+
+> The component has:
+> - A state variable.
+> - An _inputRef_ ref variable attacched to an input element contained in a form.
+> - An dispatch function returned from _useEventDispatcher_ with _inputRef_ as element.
+> - An onSubmit function to handle form onSubmit that invokes _dispatch_ function with a CustomEvent("demo") which detail is valued with input value taken from onSubmit event.
+> - A useEventListener of type _demo_, on element _inputRef_ and a listener that takes CustomEvent and invokes setState with event detail.
+
+
+## API
+
+```tsx
+useEventDispatcher (element: RefObject<HTMLElement> | Window = window): (evt: Event | CustomEvent) => void 
+```
+
+> ### Params
+>
+> - __element=window?__: _RefObject<HTMLElement> | Window_  
+target on which dispatch event
+>
+
+> ### Returns
+>
+> __dispatch__: function that dispatch the event on target
+> - _(evt: Event | CustomEvent) => void_  
+>

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

@@ -25,10 +25,11 @@ export { UseEventListener };
 ```
 
 > The component has:
-> - A _buttonRef_ ref variable linked to an button node element.
+> - A _buttonRef_ ref variable linked to an button node element with text click to log.
 > - A _useEventListener_ invocation with these options: _type_="click", _listener_=(e:Event)=>console.log(e). So the eventListener is attached to window and the invocation result is used to initialize a variable remove that remove the eventListener.
 > - A _useEventListener_ invocation like that above but attached at button node by _buttonRef_ with _listenerOpts_ capture=_true_ and that stops event propagation.
-> - A button that, if clicked, invokes the removeEventListener
+> - A _button_ with text Remove that, if clicked, invokes the removeEventListener.
+> 
 > At every click on Demo area the eventListener attached on object window logs in console the event, while the eventListener attached on button logs when button is clicked. When button remove is clicked it removes the eventListener on window object. The button eventListener is removed during component unmount.
 
 

apps/react-tools-demo/src/router/Router.tsx

@@ -26,6 +26,7 @@ import isMouseEventMD from '../markdown/isMouseEvent.md?url';
 import isTouchEventMD from '../markdown/isTouchEvent.md?url';
 import isClientMD from '../markdown/isClient.md?url';
 import usePubSubModelMD from '../markdown/usePubSubModel.md?url';
+import useEventDispatcherMD from '../markdown/useEventDispatcher.md?url';
 import { UsePrevious } from '../components/hooks/usePrevious/UsePrevious';
 import { UseStateHistory } from '../components/hooks/useStateHistory/UseStateHistory';
 import { UseCallbackCompare } from '../components/hooks/useCallbackCompare/UseCallbackCompare';
@@ -39,6 +40,7 @@ import { UsePubSubModel } from '../components/hooks/usePubSubModel/UsePubSubMode
 import { UseMemoizedFunction } from '../components/hooks/useMemoizedFunction/UseMemoizedFunction';
 import { UseLocalStorage } from '../components/hooks/useLocalStorage/UseLocalStorage';
 import { UseEventListener } from '../components/hooks/useEventListener/UseEventListener';
+import { UseEventDispatcher } from '../components/hooks/useEventDispatcher/UseEventDispatcher';
 
 function Router() {
     const router = createBrowserRouter([
@@ -167,6 +169,13 @@ function Router() {
 						markdown={usePubSubModelMD}
 					/>
 				},
+				{
+					path: "/useEventDispatcher",
+					element: <ComponentLayout
+						component={<UseEventDispatcher />}
+						markdown={useEventDispatcherMD}
+					/>
+				},
 				{
 					path: "/useEventListener",
 					element: <ComponentLayout

packages/react-tools/README.md

@@ -51,7 +51,7 @@
 	- [ ] useFullscreen (check browser compatibility)
 	- [ ] useInViewport (with area ratio of element: check if is equal to useIntersectionObserver)
 	- [ ] useLongPress
-	- [ ] useEventDispatcher
+	- [x] useEventDispatcher
 	- [x] usePubSubModel
 
 - __DOM API__

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

@@ -14,4 +14,5 @@ export { useEffectDeepCompare } from "./useEffectDeepCompare";
 export { useLayoutEffectCompare } from "./useLayoutEffectCompare";
 export { useLayoutEffectDeepCompare } from "./useLayoutEffectDeepCompare";
 export { usePubSubModel } from './usePubSubModel';
+export { useEventDispatcher } from './useEventDispatcher';
 export { useEventListener } from './useEventListener';

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

@@ -0,0 +1,18 @@
+import { RefObject } from "react"
+import { useMemoizedFunction } from ".";
+
+/**
+ * __`useEventDispatcher`__: Hook to dispatch an Event or a CustomEvent
+ * @param {RefObject<HTMLElement> | Window} [element=window] - target on which dispatch event
+ * @returns {(evt: Event | CustomEvent) => void} dispatch - function that dispatch the event on target
+ */
+export const useEventDispatcher = (element: RefObject<HTMLElement> | Window = window): (evt: Event | CustomEvent) => void => {
+	const dispatch = useMemoizedFunction((evt: Event | CustomEvent) => {
+		const target = Reflect.has(element, "current")
+			? (element as RefObject<HTMLElement>).current
+			: element;
+		(target as HTMLElement | Window).dispatchEvent(evt);
+	})
+
+	return dispatch;
+}

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useLayoutEffect, useRef } from "react";
 
 /**
  * **`useMemoizedFunction`**: Hook to store a function that will never change while keeping its dependencies always up to date. Can be used instead of _useCallback_, without esplicity dependencies array.
@@ -10,7 +10,7 @@ export const useMemoizedFunction = <T extends (...args: any[]) => any>(fn: T) =>
 
 	const memoizedFn = useCallback((...args: Parameters<T>):ReturnType<T> => fnRef.current(...args), []);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		fnRef.current = fn
 	});
 

packages/react-tools/src/index.ts

@@ -19,6 +19,7 @@ export {
 	useLayoutEffectCompare,
 	useLayoutEffectDeepCompare,
 	usePubSubModel,
+	useEventDispatcher,
 	useEventListener
 } from './hooks'