react-event-light
v0.0.4
Published
npm package for react app
Downloads
6
Readme
React Event Channel
A simple and lightweight package to facilitate an event-driven architecture in React applications, allowing components to subscribe to and publish events with ease.
Installation
Install the package via npm:
npm install react-event-light -S
Usage
Importing
First, import the useEventLight
hook into your React component:
import { useEventLight } from "react-event-channel";
Subscribing to Events
You can subscribe to an event to listen for any data that gets published on that event channel. Here is an example of how to subscribe and handle incoming data:
import React, { useEffect } from "react";
import { useEventLight } from "react-event-channel";
function MyComponent() {
const [subscribe, publish] = useEventLight();
useEffect(() => {
const subscription = subscribe("my-event", (data) => {
console.log("Received data:", data);
});
return () => {
subscription.unsubscribe();
};
}, [subscribe]);
return <div>Check your console for event data.</div>;
}
export default MyComponent;
Publishing to Events
To publish data to an event channel, so that all subscribers to that channel can receive and process the data, use the publish function like this:
import React from "react";
import { useEventLight } from "react-event-channel";
function PublisherComponent() {
const [, publish] = useEventLight();
const sendData = () => {
publish("my-event", { message: "Hello from PublisherComponent!" });
};
return <button onClick={sendData}>Send Event</button>;
}
export default PublisherComponent;
API
- subscribe(event: REACT_EVENT_LIGHT_CHANNEL_NAME, callback: Callback): Subscribe to an event. Returns an object with an unsubscribe method to stop listening for the event.
- publish(event: REACT_EVENT_LIGHT_CHANNEL_NAME, data: DataType): Publish data to all subscribers of the specified event.
TypeScript Support
This package includes TypeScript definitions to enhance development experience with type checking.
Enjoy using React Event Channel for your event-driven React applications!