How to work with multiple tabs using react-idle-timer

Question

I am having a react Application, where I need to display a modal with two buttons (Logout and Continue Session) when the user goes idle, It was actually working fine with the IdleTimer component from the react-idle-timer.

But If I open the Application in multiple tabs, and click on Continue session in one tab, the other tabs are not receiving that, The sample code that I have used is,

<IdleTimer
        timeout={1000}
        onIdle={// Opens a modal with two buttons Logout and Continue Session}
      ></IdleTimer>

Is it possible to use the crossTab prop? but I am not sure how to implement them.

How can I achieve my requirement to work with multiple tabs so that if I click on continue session all the tabs need to close the modal.

The version I am using is - react-idle-timer (4.6.4)

Could someone please help with this to achieve my requirement? Thanks in advance!!

Answer 1

You can use the Cross Tab Messaging feature from the documentation:

  // Action dispatcher (redux)
  const dispatch = useDispatch()

  // Message handler 
  const onMessage = data => {
    switch (data.action) {
      case 'LOGOUT_USER':
        dispatch(logoutAction())
        break
      // More actions
      default:
        // no op
    }
  }

  // IdleTimer instance
  const { message } = useIdleTimer({ onMessage })

  // Logout button click
  const onLogoutClick = () => {
    // Tell all tabs to log the user out. 
    // Passing true as a second parameter will
    // also emit the event in this tab.
    message({ action: 'LOGOUT_USER' }, true)
  }

See the documentation for v5, here.