useBroadcastChannel

useBroadcastChannel is a hook that allows you to use the BroadcastChannel API in your components.

Usage

Live Editor

function Demo() {
  const { isSupported, data, post, error,timeStamp } = useBroadcastChannel({
    name: "reactuse-demo-channel",
  });

  const [message, setMessage] = useState("");

  useEffect(() => {
    if (isSupported) {
      alert(data);
    }
  }, [data]);

  return (
    <div>
      <p>Supported: {JSON.stringify(isSupported)}</p>
      <p>Please open this page in at least two tabs</p>
      <p>
        <b>Channel:</b> reactuse-demo-channel
      </p>
      <p>
        <b>Message:</b> {data}<br/>
        <b>TimeStamp:</b> {timeStamp}
      </p>
      <input
        value={message}
        onChange={(event) => {
          setMessage(event.currentTarget.value);
        }}
      />
      <button
        onClick={() => post(message)}
        style={{
          cursor: isSupported ? "pointer" : "not-allowed",
        }}
      >
        Send
      </button>
      {error && <p>Error: {error.message}</p>}
    </div>
  );
}

Result

Loading...

API

UseBroadcastChannelOptions

Property	Description	Type	DefaultValue
name	channel name	string (Required)	-

UseBroadcastChannel

Returns

UseBroadcastChannelReturn<D, P>

Arguments

Argument	Description	Type	DefaultValue
options	options	UseBroadcastChannelOptions (Required)	-

UseBroadcastChannelReturn

Property	Description	Type	DefaultValue
isSupported	is supported	boolean (Required)	-
channel	channel	BroadcastChannel | undefined (Required)	-
data	data	D | undefined (Required)	-
post	post data	(data: P) => void (Required)	-
close	close	() => void (Required)	-
error	error	Event | null (Required)	-
isClosed	is closed	boolean (Required)	-
timeStamp	timestamp	number (Required)	-