https://github.com/guptasiddhant/react-broadcast-channel
React hooks for accessing web broadcast channel API.
https://github.com/guptasiddhant/react-broadcast-channel
broadcast channel hooks react use
Last synced: about 2 months ago
JSON representation
React hooks for accessing web broadcast channel API.
- Host: GitHub
- URL: https://github.com/guptasiddhant/react-broadcast-channel
- Owner: GuptaSiddhant
- License: mit
- Created: 2021-10-15T23:43:14.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-06-09T13:46:15.000Z (over 1 year ago)
- Last Synced: 2024-12-10T00:36:38.006Z (10 months ago)
- Topics: broadcast, channel, hooks, react, use
- Language: TypeScript
- Homepage: https://npm.im/use-broadcast-channel/
- Size: 205 KB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-broadcast-channel (React-hooks)
> The **Broadcast Channel API** allows basic communication between browsing contexts (that is, windows, tabs, frames, or iframes) and workers on the same origin. _-[MDN](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)_
This package provides a thin wrapper around the browser's native Broadcast Channel API in the form of a React hook function. The hook(s) can be used in any React component or custom hook to harness the functionality of Broadcast Channel API.
_To use the hooks in browsers that do not support Broadcast Channel API, install and import [broadcastchannel-polyfill](https://www.npmjs.com/package/broadcastchannel-polyfill)._
> For typescript users: The default data-type for all messages are set to `string` but can be easily overridden by explicitly passing type parameter to the hook(s). Example for numeric data: `useBroadcastChannel("count", (e) => console.log(e.data));`
## Setup
Package available at [NPM](https://www.npmjs.com/package/use-broadcast-channel).
- NPM
```shell
npm install use-broadcast-channel
```
- Yarn
```shell
yarn add use-broadcast-channel
```
## API
The package exports multiple hooks for different use-cases.
### `useBroadcastChannel` hook
React hook to create and manage a Broadcast Channel across multiple browser windows/tabs/frames.
This is base hook exported by the package as all other exported hooks depends on it.
#### - Read-only
Only subscribe for events broadcasted on a particular channel.
```tsx
import { useBroadcastChannel } from "use-broadcast-channel";
function App() {
useBroadcastChannel("userId", (e) => alert(e.data));
return null;
}
```
#### - Write-only
Only broadcast (post) event on a particular channel.
```tsx
import { useBroadcastChannel } from "use-broadcast-channel";
function App() {
const postUserId = useBroadcastChannel("userId");
return postUserId("ABC123")}>Post UserId;
}
```
#### - Read and Write
Both broadcast (post) event and subscribe for events broadcasted on a particular channel.
```tsx
import { useBroadcastChannel } from "use-broadcast-channel";
function App() {
const postUserId = useBroadcastChannel("userId", (e) => alert(e.data));
return postUserId("ABC123")}>Send UserId;
}
```
### `useBroadcastState` hook
React hook to manage state across browser windows/tabs/frames. It has a similar signature as `React.useState`. It used `useBroadcastChannel` under the hood.
```tsx
import { useBroadcastState } from "use-broadcast-channel";
function App() {
const [count, setCount] = useBroadcastState("count", 0);
return (
setCount((prev) => prev - 1)}>Decrement
{count}
setCount((prev) => prev + 1)}>Increment
);
}
```