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
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 (
<div className="App" >
<h1>{shouldLogout ? 'Logged Out' : 'Logged In' }</h1>
<button onClick={logout}>Logout</button>
</div>
);
}
License
MIT
