https://github.com/janeksmielowski/event-bus

React Event Bus library for post messaging in JS/TS
https://github.com/janeksmielowski/event-bus

bus event event-bus eventbus javascript message post post-message postmessage react spa typescript

Last synced: 13 days ago
JSON representation

React Event Bus library for post messaging in JS/TS

• Host: GitHub
• URL: https://github.com/janeksmielowski/event-bus
• Owner: janeksmielowski
• License: mit
• Created: 2020-12-13T21:13:24.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-10-14T00:37:03.000Z (over 2 years ago)
• Last Synced: 2025-01-16T22:08:32.606Z (20 days ago)
• Topics: bus, event, event-bus, eventbus, javascript, message, post, post-message, postmessage, react, spa, typescript
• Language: TypeScript
• Homepage: https://janeksmielowski.github.io/event-bus/
• Size: 7.81 KB
• Stars: 14
• Watchers: 2
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Event Bus hook

This library provides easy-to-use React hook, for dispatching messages, via JavaScript `postMessage` function.

It is implemented using event bus design pattern, which is based on publish/subscription model.

## Basic usage

1. Create a file for event bus message types (skip if you're not using TypeScript):

```ts

export interface LoaderVisibilityMessage {

    visible: boolean;

}

// ... more message structures here

export interface EventBusMessages {

    LoaderVisibility: LoaderVisibilityMessage;

    // ... rest of messages here

}

```

Let's pretend you have some SPA application, that will show some microservice in a frame. For better user experience, you would like to show some loader on it, before the service will finish loading.

For this reason, you will need to create `LoaderVisibilityMessage`, that will carry loader visibility state. Finally, you put all message structures, that your app will use, into a single `EventBusMessages` interface.

2. Subscribe for a topic in your subscriber component:

```ts

import { EventBusMessages } from 'EventBus.types.ts';

const SubscriberComponent: FunctionComponent = () => {

    const eventBus = useEventBus();

    const [loaderVisible, setLoaderVisible] = useState(true);

    useEffect(() => {

        const loaderListener = eventBus.subscribe('LoaderVisibility', handler);

        return () => {

            loaderListener.unsubscribe();

        };

    }, []);

    const handler = (message: LoaderVisibilityMessage) => {

        setLoaderVisible(message.visible);

    };

    return 
{loaderVisible && 'Loading...'}
;

}

```


This will be the code for your SPA application. The subscriber will 'listen' to any message with topic `LoaderVisibility`. When the message comes, the event bus will fire `handler` function and pass incoming message payload.

Important: Always remember to unsubscribe from the event. Event bus works with listeners, so you wouldn't like to have any 'zombie' listeners in your application.

2. Publish message from your publisher component:

```ts

import { EventBusMessages } from 'EventBus.types.ts';

const PublisherComponent: FunctionComponent = () => {

    const eventBus = useEventBus();

    useEffect(() => {

        eventBus.publish({

            topic: 'LoaderVisibility',

            payload: { visible: false }

        });

        return () => {

            eventBus.publish({

                topic: 'LoaderVisibility',

                payload: { visible: true }

            });

        };

    }, []);

    return 
Hello from microservice!
;

}

```


Once the microservice application renders, it will automatically publish message indicating, that it doesn't need loader to be visible.

Note: We're also publishing the message to show the loader back again, when the component will unmount or reload.

## Learn more

This project was bootstrapped with [React TypeScript Library Template](https://github.com/janeksmielowski/react-ts-library)