eventelo
Communicate React components using event-based hooks.
Table of Contents
Installation
You can install package using npm or yarn:
npm i eventelo
yarn add eventelo
Usage
import { useSubscriber } from "eventelo";
import { useEffect, useState } from "react";
export const Sub = () => {
const [state, setState] = useState("..");
const { subscribe, unsubscribe, unsubscribeAll } = useSubscriber();
useEffect(() => {
// Subscribe callback to event by name "input"
const key = subscribe("input", (data: string) => {
setState(data);
});
return () => {
// Unsubscribe from event by passing key returned from subscribe function
unsubscribe(key);
};
}, [subscribe, unsubscribe]);
return (
<div>
<p>{state}</p>
</div>
);
};
import { useEmit } from "eventelo";
import { useState } from "react";
export const Emiter = () => {
const [state, setState] = useState("");
const { emit } = useEmit();
return (
<div>
<input value={state} onChange={(e) => setState(e.currentTarget.value)} />
<button onClick={() => emit("input", state)}>Emit event with data</button>
<button onClick={() => emit("input")}>Emit event</button>
</div>
);
};
More examples of usage. The best example here.
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.