Events and Channels for react

This library offers functions and hooks to transfer data or functions across components or stores.

use 'createEvent()' to create an event. use 'createChannel()' to create a channel.

use event.trigger() to send data to subscribers. use channel.publish() to send message over a channel.

Channels or events are amazing way to send and recieve messages between components. These messages can have data or functions. there can be multiple subscribers to a channel or event.

Event and Channel are both similar in everyway. Channel has publish function to send messages. Events have trigger function to send data to subscribers.

you can also use another library called x-channel if you just want to create and manage channels of communication across components.

check Example on Stackblitz

Stackblitz Example

Events

• creteEvent(): Creates and returns a new event.
• useOnEvent(events, onEventCallback): Subscribes to an event and calls a callback when the event is triggered.
• useOnEventOnce(events, onEventCallback): Subscribes to an event and calls a callback once when the event is triggered.
• useEventData(event): Returns the last data of the event.
• event.trigger(data, meta): Triggers the event with the given data and meta.
• event.getState(): Returns the last state of the event.
• event.getSubscriptionsCount(): Returns the number of active subscriptions to the event.
• event.triggerAndDisable(data, meta): Triggers the event with the given data and meta and disables the event.
• event.subscribeOnce(callback): Subscribes to the event and calls the callback once.

  const event = createEvent();
  const unsubscribe = event.subscribe((data, meta) => {
    console.log(data, meta);
  });
  event.trigger({ message: "Hello, world!" });
  event.trigger(function(){}); // you can also pass functions
  event.trigger({ message: "Hello, world!" }, { from: "component1", type: "info" }); // trigger with meta 
  unsubscribe(); // unsubscribe from the event  

Listening to events in a component

  useOnEvent([event], (data, meta) => {
    console.log(data, meta);
    /// gets called when the event is triggered
  });

Channels

• createChannel(): Creates a new channel.
• useChannel(channel, onPublishCallback): Subscribes to a channel and calls a callback when the channel is triggered.
• channel.publish(data, meta): Publishes a message to the channel.
• channel.getState(): Returns the last state of the channel.
• channel.getSubscriptionsCount(): Returns the number of active subscriptions to the channel.

  const channel = createChannel();
  const unsubscribe = channel.subscribe((data, meta) => {
    console.log(data, meta);
  });
  channel.publish({ message: "Hello, world!" });
  channel.publish({ message: "Hello, world!" }, { from: "component1", type: "info" }); // trigger with meta 
  unsubscribe(); // unsubscribe from the channel  

Accessing channels in a component

  useChannel(channel, (data, meta) => {
    console.log(data, meta);
    /// gets called when the channel is triggered
  });

License

This utility is open-source and available under the MIT License.