https://github.com/AvraamMavridis/react-window-communication-hook

React hook to communicate among browser context (tabs, windows, iframes)
https://github.com/AvraamMavridis/react-window-communication-hook

communication hooks iframe react tab window

Last synced: about 2 months ago
JSON representation

React hook to communicate among browser context (tabs, windows, iframes)

• Host: GitHub
• URL: https://github.com/AvraamMavridis/react-window-communication-hook
• Owner: AvraamMavridis
• Created: 2018-10-28T15:50:48.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-12-28T06:01:29.000Z (almost 4 years ago)
• Last Synced: 2024-10-11T06:29:50.693Z (2 months ago)
• Topics: communication, hooks, iframe, react, tab, window
• Language: JavaScript
• Homepage:
• Size: 2.38 MB
• Stars: 93
• Watchers: 4
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

• fucking-awesome-react-hooks - `react-window-communication-hook`
• awesome-react-hooks-cn - `react-window-communication-hook`
• awesome-react-hooks - `react-window-communication-hook`
• awesome-react-hooks - `react-window-communication-hook`

README

        
# react-window-communication-hook

React hook to communicate among browsers contexts (windows, tabs, iframes).

Example use case: When the user presses logout in one tab, logout from every other tab

## How to use it

Import

```

import useBrowserContextCommunication from 'react-window-communication-hook';

```

pass a channel name

```

const [communicationState, postMessage] = useBrowserContextCommunication("myGreatChannel");

```

`communicationState` contains `lastMessage` and `messages` which is an array of the messages that where send from other tabs/windows to the current one.

Use `postMessage` to send messages to the other browser contextes (windows, tabs, iframes)

# Example

```js

import useBrowserContextCommunication from 'react-window-communication-hook';

function App() {

  // state ({lastMessage,messages}) that comes from other browser context

  const [communicationState, postMessage] = useBrowserContextCommunication("channel");

  // Tabs, Windows etc are not listening to there own messages so

  // we need an extra local state

  const [status, setStatus] = useState("login");

  function logout() {

    setStatus("logout");

    postMessage("logout");

  }

  const shouldLogout = [communicationState.lastMessage, status].includes('logout');

  return (

    


      
{shouldLogout ? 'Logged Out' : 'Logged In' }

      Logout

    

  );

}

```




# License

MIT