Skip to content

Latest commit

 

History

History
32 lines (24 loc) · 859 Bytes

README.md

File metadata and controls

32 lines (24 loc) · 859 Bytes

📡 useBroadcast

This is a React hook that lets you keep two browser tabs / windows in sync. Behind the scenes it uses the Broadcast Channel API to send messages between instances. This way you can take action in one tab and have the state automatically shared with other instances of your component regardless of which window or tab they're in.

Demo

Example

import { useBroadcast } from 'use-broadcast';

export const MyComponent = () => {
  const initialState = 0;
  const [state, setState] = useBroadcast('channel_name', initialState);

  function click() {
    setState(state + 1);
  }

  return (
    <div>
      <button onClick={click}>increment</button>
    </div>
  )
}