LogoLogo
  • Home
  • Services
    • Fiber
    • Accessor
    • Schema
    • Form
    • Translator
  • Components
    • <Router/>
    • <Memo />
  • Observables
    • Async
    • Value
    • Store
    • List
    • Local Storage Value
    • Local Storage Store
    • Local Storage List
  • Hooks
    • useAsync
    • useAffect
    • useStream
    • useAction
    • useDebounce
    • useThrottle
    • usePrevious
    • useIdle
    • useValue
    • useList
    • useStore
    • useForm
    • useFormBinder
    • useTranslator
    • useQuery
  • Helpers
    • Tag
    • Input Helpers
    • Promise Helpers
    • Save Helpers
    • Pagination Helpers
    • Clipboard Helpers
    • Calendar Helpers
    • Local Storage Helpers
Powered by GitBook
On this page

Was this helpful?

  1. Hooks

useIdle

Detect when a user goes idle.

PrevioususePreviousNextuseValue

Last updated 3 years ago

Was this helpful?

Source code is hosted on

yarn add @corets/use-idle
npm install --save @corets/use-idle

useIdle()

Detect when a user has been inactive for a certain amount of time:

import React, { useEffect } from "react"
import { useIdle } from "@corets/use-idle"

const Example = () => {
  const isIdle = useIdle({
    // check every 10s
    interval: 10 * 1000,
    // regard user as idle after 30min
    threshold: 30 * 60 * 1000,
    // specify events that should reset the idle status (default: ["mousemove", "mouseup", "keyup", "focus", "resize"])
    events: ["mousemove"],
    // local storage key for the last activity timestamp (default: last-activity)
    storageKey: "custom-storage-key"
  })
  
  useEffect(() => {
    if (isIdle) {
      // do something, for example: logout()
    }
  }, [isIdle])
  
  return (
    <div>My App</div>
  )
}
GitHub