https://github.com/deve-sh/eazi

An efficient and lightweight messaging library for your front-end. 📫
https://github.com/deve-sh/eazi

Last synced: 5 days ago
JSON representation

An efficient and lightweight messaging library for your front-end. 📫

• Host: GitHub
• URL: https://github.com/deve-sh/eazi
• Owner: deve-sh
• Created: 2023-08-22T03:24:05.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-25T15:50:04.000Z (about 1 year ago)
• Last Synced: 2024-09-18T13:15:44.967Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 436 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Eazi

An efficient and lightweight messaging library for your front-end.

### Introduction

Ever wanted to have a way to keep all your tab's states in sync with minimal effort? (Or) Wanted a lightweight option to communicate between frontend components kept way apart from each other in the application architecture without using a bulky state-management solution?

Well, you can do both so with Eazi.

### Some other advantages

- Lightweight (4 Kb minified)

- Uses the `BroadcastChannel` API by default. Falls back to automatically select browser storage events vs `BroadcastChannel` if not available.

- Fully Typed and has a clean interface.

### Installing

```bash

npm i --save eazi

```

and then:

```js

import { Channel } from "eazi";

```

or if you're a plain HTML fan:

```html

	mediatorLoadingScript.onLoad = () => {

		const Channel = eazi.Channel;

	}

```

### Usage Example

Let's see how you can simplify something like logging a user out from all tabs when they sign out from one tab.

Simply create channels, each channel requires a name that can be shared across channels in different part of the codebase:

```js

const channelInOneTab = new Channel("auth-state");

const channelInAllOtherTabs = new Channel("auth-state");

```

```js

channelInAllOtherTabs.addMessageListener((eventData) => {

	if (eventData.action === "logout") logoutUserFromThisTabToo();

});

// Dispatch an event from first tab to all other tabs

channelInOneTab.sendMessage({ action: "logout" });

```

Note: **Messages sent from a channel do not invoke listeners for the instance that sent the message**

### Storage based events channel

Simple use the second argument of the `Channel` constructor to pass a `strategy` option and set it to `storage`.

Note: **Events passed via storage events should be serializable. I.E: Functions and circular references wouldn't work.**

```js

const storageBasedEventChannel = new Channel("user-info-updates", {

	strategy: "storage",

});

```

### Simple Channel

Use this for when you don't need cross-tab/cross-window events but rather communication in the same tab.

```js

const noCrossTabCommChannel = new Channel("same-tab-pings", {

	strategy: "simple",

});

```

### Usage with React

If you're using React, you don't have to worry about the lifecycle, we have the `useChannel` hook for that.

The hook takes care of unmounting message listeners and closing connections to open channels on unmounting.

It supports the same `strategy` options as its second argument as the regular `Channel` constructor.

```jsx

import { useChannel } from 'eazi/react';

const Component = () => {

	const channel = useChannel("app-wide-events");

	useEffect(() => {

		channel.addMessageListener(eventData => {

			...

		})

	}, []);

	...

}

```