use-broadcast-ts
Use the Broadcast Channel API in React easily with hooks
or Zustand
, and Typescript!
npm install use-broadcast-ts
This package allows you to use the Broadcast API with a simple hook or by using Zustand.
Usage with Zustand
import { create } from 'zustand';
import { shared } from 'use-broadcast-ts';
type MyStore = {
count: number;
set: (n: number) => void;
};
const useStore = create<MyStore>()(
shared(
(set) => ({
count: 0,
set: (n) => set({ count: n })
}),
{ name: 'my-channel' }
)
);
import { FC } from 'react';
const MyComponent : FC = () => {
const { count, set } = useStore(
(s) => ({
count: s.count,
set: s.set
})
)
return (
<p>
<p>Count: {count}</p>
<button onClick={() => set(10)}/>
</p>
)
}
export default MyComponent;
You can use the Zustand store like any other Zustand store, but the store will be shared between all the tabs.
Usage with hooks
import { FC } from 'react';
import { useBroadcast } from 'use-broadcast-ts';
const MyComponent: FC = () => {
const { state, send } = useBroadcast<{ value: number }>('my-channel', { value: 0 });
return (
<>
<p>My value is: {state.value}</p>
<button onClick={() => send({ value: 10 })} />
</>
);
};
export default MyComponent;
With the example above, the component will re-render when the channel receive or send a value.
import { FC, useEffect } from 'react';
import { useBroadcast } from 'use-broadcast-ts';
const MyComponent: FC = () => {
const { send, subscribe } = useBroadcast<{ value: number }>('my-channel', { value: 0 }, { subscribe: true });
useEffect(() => {
const unsub = subscribe(({ value }) => console.log(`My new value is: ${value}`));
return () => unsub();
}, []);
return (
<>
<button onClick={() => send({ value: 10 })} />
</>
);
};
export default MyComponent;
With the example above, the component will not re-render when the channel receive or send a value but will call the subscribe
callback.
API
shared (Zustand)
shared(
(set, get, ...) => ...,
options: SharedOptions
);
Parameters
options
Type: SharedOptions
The options of the hook.
options.name (required)
Type: string
The name of the channel to use.
useBroadcast (hooks)
useWasm<T>(name: string, value?: T, options?: UseBroadcastOptions): {
state: T;
send: (value: T) => void;
subscribe: (callback: (e: T) => void) => () => void;
};
Parameters
name
Type: string
The name of the channel to use.
value
Type: T
(default: undefined
)
The initial value of the channel.
options
Type: UseBroadcastOptions
(default: {}
)
The options of the hook.
options.subscribe
Type: boolean | undefined
(default: undefined
)
If true, the hook will not re-render the component when the channel receive a new value but will call the subscribe
callback.
Return
state
Type: T
The current value of the channel.
send
Type: (value: T) => void
Send a new value to the channel.
subscribe
Type: (callback: (e: T) => void) => () => void
Subscribe to the channel. The callback will be called when the channel receive a new value and when the options.subscribe is set to true.
What data can I send?
You can send any of the supported types by the structured clone algorithm like :
String
Boolean
Number
Array
Object
Date
...
In short, you cannot send :
Function
Dom Element
- And some other types
See the MDN documentation for more information.
License
MIT