use-broadcast-ts

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

// useStore.ts
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' }
    )
);

// MyComponent.tsx
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