Nutritious Pumpkin Meal

    react-window-communication-hook

    1.6.0 • Public • Published

    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

    Install

    npm i react-window-communication-hook

    DownloadsWeekly Downloads

    777

    Version

    1.6.0

    License

    MIT

    Unpacked Size

    1.41 MB

    Total Files

    7

    Last publish

    Collaborators

    • avrmav