eazi v1.0.1
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 vsBroadcastChannel
if not available. - Fully Typed and has a clean interface.
Installing
npm i --save eazi
and then:
import { Channel } from "eazi";
or if you're a plain HTML fan:
<script type="text/javascript" id="mediatorLoadingScript" src="https://unpkg.com/eazi"></script>
<script type="text/javascript">
mediatorLoadingScript.onLoad = () => {
const Channel = eazi.Channel;
}
</script>
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:
const channelInOneTab = new Channel("auth-state");
const channelInAllOtherTabs = new Channel("auth-state");
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.
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.
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.
import { useChannel } from 'eazi/react';
const Component = () => {
const channel = useChannel("app-wide-events");
useEffect(() => {
channel.addMessageListener(eventData => {
...
})
}, []);
...
}