use-broadcast-ts

use-wasm-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;

API

useBroadcast

useWasm<T>(name: string, value?: T): {
    state: T;
    send: (value: T) => void;
};

Parameters

name

Type: string

The name of the channel to use.

value

Type: T (default: undefined)

The initial value of the channel.

Return

state

Type: T

The current value of the channel.

send

Type: (value: T) => void

Send a new value to the channel.

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