use-broadcast-ts

use-broadcast-ts

Use the Broadcast Channel API in React easily with hooks and Typescript!

npm install use-broadcast-ts

This package allows you to use the Broadcast API with a simple hook.

Usage

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

useBroadcast

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