Is it possible to call useIdleTimer with same name multiple times?

[tuhin-tsm]

I have two components: <App /> and <AppSettings />. Inside <App /> I have logic for idle timer. Inside <AppSettings /> I have sign out functionalities. I want to use cross tab messaging between these two components. Is there a way to achieve this? I don't want to pass down props.

[SupremeTechnopriest]

Hey @tuhin-tsm!

IdleTimer exposes the underlying messaging channel for you to use how ever you like. You can find the relevant docs here:

https://idletimer.dev/docs/getting-started/new#cross-tab-messaging

Maybe you can take advantage of the IdleTimerProvider to avoid the need for drilling props, but it sounds like you might have an inversion of control issue. Could you share a little code to help me understand your set up?

Here are the docs for the Provider:

https://idletimer.dev/docs/api/idle-timer-provider

[tuhin-tsm]

So I have following components structure in my Next.js app. I cannot restructure it due to my app's requirement.

<App>
  <Header>
  {/* Sign out button resides here inside dropdown menu */}
  </Header>
  <IdleTimer>
  {/* It renders either the confirmation alert UI or the content of the page */}
  </IdleTimer>
</App>

I created a custom hook wrapping the actual useIdleTimer hook:

import { useIdleTimer, workerTimers } from "react-idle-timer";

export const IDLE_TIMER_TIMEOUT = 1000 * 60 * 10;
export const IDLE_TIMER_PROMPT_TIMEOUT = 1000 * 60 * 1;

interface LogoutTimerProps {
  onActive?: (event?: Event) => void;
  onIdle?: () => void;
  onMessage?: (data: any) => void;
  onPrompt?: () => void;
}

export function useLogoutIdleTimer({
  onActive = () => {},
  onIdle = () => {},
  onMessage = () => {}, // I had to initialize this with empty function to solve my purpose
  onPrompt = () => {}
}: LogoutTimerProps) {
  return useIdleTimer({
    crossTab: true,
    name: "logout-timer",
    onActive,
    onIdle,
    onMessage,
    onPrompt,
    promptTimeout: IDLE_TIMER_PROMPT_TIMEOUT,
    timers: workerTimers,
    timeout: IDLE_TIMER_TIMEOUT
  });
}

I am calling the above hook from IdleTimer and Header with different arguments:

// IdleTimer

const onIdle = () => {
    setOpen(false)
    setRemaining(0)

    message(IDLE_TIMER_LOGOUT_MESSAGE, true)
  }

const {activate, getRemainingTime, isPrompted, message} = useLogoutIdleTimer({
    onActive,
    onIdle,
    onPrompt,
  })

// Header

const onMessage = (message: string) => {
    if (message === IDLE_TIMER_LOGOUT_MESSAGE) {
      dispatch(logout())
    }
  }

  const {message} = useLogoutIdleTimer({
    onMessage,
  })

  const handleSignOut = () => {
    message(IDLE_TIMER_LOGOUT_MESSAGE, true)
  }

As you can see, I am only passing onMessage while calling the hook on Header. Previously it was not working and I was not getting the message. However when I initialized the hook with empty functions i.e. () => {}, it worked!

[SupremeTechnopriest]

Gotcha. The methods are initialized with no op functions inside the hook itself so not sure why you would have needed to initialize them, but glad you got it working!