@thirty-one/events

Events

This package enables React components to communicate without direct coupling, by providing a dispatch/listen concept. It allows components to dispatch events that can be listened to by other components, facilitating communication and coordination. Developers can use it to create a modular and scalable architecture, as components can be added, removed, or modified without affecting the rest of the application.

Installation

You can install the package via pnpm:

pnpm install @thirty-one/events

Usage

Here's an example of how to use the package:

import { useDispatch, useListen } from "@thirty-one/events";

const COUNTER_CHANGE = "counter:change";

function Listener() {
	const [count, setCount] = useState(0);

	useListen(COUNTER_CHANGE, () => {
		setCount((c) => c + 1);
	});

	return <div>Count: {count}</div>;
}

function Dispatcher() {
	const dispatch = useDispatch();

	return (
		<button type="button" onClick={() => dispatch(COUNTER_CHANGE)}>
			Increase
		</button>
	);
}

function App() {
	return (
		<>
			<Listener />
			<Dispatcher />
		</>
	);
}