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 2 months 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 (5 months ago)
• Default Branch: main
• Last Pushed: 2024-09-11T16:57:20.000Z (4 months ago)
• Last Synced: 2024-11-18T11:30:04.620Z (2 months ago)
• Language: TypeScript
• Size: 28.3 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)