Is there a way for the use to be considered idle when the web page loses focus? ⚡️

[mircealungu]

What problem does your feature request solve?

from the app's POV, the fact that the user is not on the page anymore it is the same as being idle. Or?

Describe the solution you are proposing.

stop the counter on blur event?

Describe alternatives you have considered.

implementing it on my own, but it's less nice.

Importance

I Need It

Additional Context

• This missing feature presents as a bug.
• This missing feature is forcing me to consider alternatives.

[SupremeTechnopriest]

Just add the blur event to the events prop.

[mircealungu]

Ah, I see. Cool!

I tried with this code:

    useIdleTimer({
        onIdle,
        onActive,
        events: "blur",
        timeout: 30_000,
        throttle: 500,
    });

The problem is that on the page I would like to give 30seconds before becoming idle. However, when one defocuses the app, I would want that it goes automatically in idle. How would you do taht?

[SupremeTechnopriest]

The events prop needs to be an array. Try this as the value.

import { DEFAULT_EVENTS, useIdleTimer } from 'react-idle-timer'

...
useIdleTimer({
  onIdle,
  onActive,
  events: DEFAULT_EVENTS.concat('blur'),
  timeout: 30_000,
  throttle: 500,
});

[SupremeTechnopriest]

Oh you want them to immediately go idle? You can use immediateEvents

useIdleTimer({
  onIdle,
  onActive,
  immediateEvents: ['blur'],
  timeout: 30_000,
  throttle: 500,
});

[mircealungu]

Nice! So basically, it will timeout after 30s of inactivity while in focus, or immediately on blur. This is what I wanted indeed!

[SupremeTechnopriest]

That's correct! Feel free to close if this solves your issue!

[mircealungu]

The following does not work :(

    useIdleTimer({
        onIdle,
        onActive,
        timeout: 30_000,
        immediateEvents: ['blur'],
        throttle: 500,
    });