useEvents

Communication system based on Events pattern implemented on a EventTarget subclass. AddListener and dispatch functions to communicate. The result of invoking the addListener function in turn returns a function that can be used to removeListener on event. Otherwise, the listener is automatically removed when the component that has instantiated it is unmounted.

Demo

INFO

The component has:

• A useState that receives an object, with _value property.
• A useEvents that returns addListener function.
• A child component that has useEvents that returns dispatch function and renders an input text with an onChange handler that invoke the dispatch function with a custom event with type demo and with a custom event with input value as detail.

The main component calls addlistener that updates component state inside an useEffect, in this way the listener addListener is done only once and when the component is unmounted, it executes the unlisten.

Loading demo…

Show source code

import { BaseSyntheticEvent, memo, useCallback, useEffect, useState } from "react";
import { useEvents } from "../../../..";

const ChildComponent = memo(() => {
	const [, dispatch] = useEvents();
	const onChange = useCallback((e: BaseSyntheticEvent) => {
		dispatch(new CustomEvent("demo", { detail: {value: e.target.value} }));
	}, [dispatch]);
	return (
		<input type="text" onChange={onChange} />
	);
})
const UseEvents = () => {
	const [state, setState] = useState({ value: "" });
	const [ addListener ] = useEvents();

	useEffect(() => {
		const unsub = addListener("demo", (evt) => {
			setState((evt as CustomEvent).detail);
		})
		return () => {
			unsub();
		}
	}, [addListener]);

	return <div>
		<p>Value is: {state.value}</p>
		<ChildComponent/>
	</div>
}

UseEvents.displayName = "UseEvents";

export { UseEvents };

Types

UseEventsResult

• @template T - The type of the detail payload carried by {@link CustomEvent} instances. Defaults to unknown when not specified.

Return value of useEvents.

A tuple of two functions for listening to and dispatching events on the global window object.

Index	Type	Description
[0]	( type: string, callback: (evt: Event \| CustomEvent<T>) => void, options?: boolean \| AddEventListenerOptions ) => () => void	Registers an event listener on the global window object for the given event type. Returns a cleanup function that removes the listener when called. @param type - The event type string to listen for (e.g. "click"). @param callback - The handler invoked when the event fires. Receives the native {@link Event} or a {@link CustomEvent} whose detail is typed as T. @param options - Options forwarded to addEventListener as the third argument. Accepts either a boolean shorthand for capture or a full {@link AddEventListenerOptions} object. @returns A cleanup function that removes the registered listener when called.
[1]	(evt: Event \| CustomEvent<T>) => void	Dispatches the provided {@link Event} or {@link CustomEvent} on the global window object, synchronously invoking all matching listeners registered via the first tuple entry. @param evt - The event to dispatch.