https://github.com/jonabrams/react-create-event
A simple library to send events between React components.
https://github.com/jonabrams/react-create-event
Last synced: about 1 year ago
JSON representation
A simple library to send events between React components.
- Host: GitHub
- URL: https://github.com/jonabrams/react-create-event
- Owner: JonAbrams
- Created: 2024-09-05T03:01:13.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T07:22:04.000Z (over 1 year ago)
- Last Synced: 2025-04-06T19:58:56.393Z (about 1 year ago)
- Language: TypeScript
- Size: 54.7 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-create-event
A simple library for sending events between React components (aka client-side pub/sub).
Features:
- Fire events from anywhere.
- Listen to events inside of components using the event's `useListen` hook.
- Supports TypeScript, but it is not required.
- Can create events that include details from the sender.
- Can create events that include results from listeners.
## Install
```
npm install react-create-event
```
## Usage (Basic Case)
Create the event, and and export it (it's recommended to create them in one file):
```ts
// File: events.ts | events.js
import { createEvent } from "react-create-event";
export const hitEvent = createEvent();
```
Fires the event:
```jsx
import { hitEvent } from "../events";
export function Hitter() {
return hitEvent.fire()}>Hit;
}
```
Listen for the event:
```jsx
import { hitEvent } from "../events";
export function HitCounter() {
const [count, setCount] = useState(0);
hitEvent.useListen(() => {
setCount((c) => c + 1);
}, []);
return
Count: {count};
}
```
## Usage (Advanced Case)
```ts
import { createEvent } from "react-create-event";
export interface Coordinates {
x: number;
y: number;
}
// First type is the "details" sent with each event.
// Second type is the return type, returned by each listener.
export const torpedoEvent = createEvent();
```
Fire the event:
```jsx
import { torpedoEvent } from "../events";
export function TorpedoLauncher() {
const [hitCount, setHitCount] = useState(0);
const fireTorpedo = useCallback(() => {
const x = Math.floor(Math.random() * 10);
const y = Math.floor(Math.random() * 10);
const results = torpedoEvent.fire({ x, y });
const hits = results.filter((r) => r).length;
setHitCount((hC) => hC + hits);
}, []);
return <>
FIRE TORPEDO!
Successful hits so far: {hitCount}
>;
}
```
Listen for the event:
```jsx
import { torpedoEvent, type Coordinates } from "../events";
export function Ship({ x, y }: Coordinates) {
const [hitCount, setHitCount] = useState(0);
torpedoEvent.useListen(
(details: Coordinates) => {
if (details.x === x && details.y === y) {
setHitCount((hC) => hC + 1);
return true;
}
},
[x, y] // hook dependencies
);
return
Times this ship was hit: {hitCount};
}
```
## Created by
Copyright [Jon Abrams (2024)](https://threads.net/@jon.abrams)