useOnIdle.js

import * as React from 'react'

let activeTimeout = null
let reactivateFn = null

export function useOnIdle(fn, time) {
  React.useEffect(() => {
    const onUsage = () => {
      if (reactivateFn) {
        reactivateFn()
        reactivateFn = null
      }

      if (activeTimeout) {
        clearTimeout(activeTimeout)
      }

      activeTimeout = setTimeout(() => {
        reactivateFn = fn()

        if (reactivateFn !== 'function') {
          reactivateFn = null
        }
      }, time)
    }

    const events = [
      'mousedown',
      'mousemove',
      'mouseup',
      'mouseenter',
      'mouseleave',
      'keydown',
      'keyup',
      'touchstart',
      'toucheend',
      'touchmove',
    ]

    events.forEach((event) => {
      document.addEventListener(event, onUsage)
    })

    return () => {
      events.forEach((event) => {
        document.removeEventListener(event, onUsage)
      })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [time])
}

// Usage example

function App () {
  useOnIdle(() => {
    console.log('User is now idle')

    return () => {
      console.log('User is active again')
    }
  }, 1000 * 60 * 1000) // 10 minutes
}