useIdleTimeout

Plugin to track user activity and manage it

TIP

A plugin to know the amount of time a user has spent on your website

Demo

isIdle: false

Wait 3 seconds without any actions to see the idle change to true

How to use it?

<template>
  <MazBtn @click="idle.start()" color="info">
    Start
  </MazBtn>
  <MazBtn @click="idle.pause()" color="warning">
    Pause
  </MazBtn>
  <MazBtn @click="idle.resume()">
    Resume
  </MazBtn>
  <MazBtn @click="idle.reset()" color="secondary">
    Reset
  </MazBtn>
  <MazBtn @click="idle.destroy()" color="danger">
    Destroy
  </MazBtn>

  <MazCard overflow-hidden style="width: 100%;">
    <div style="display: flex;">
      <div style="flex: 1;">
        isIdle: {{event.isIdle}}
      </div>
      <div v-if="event.eventType" style="flex: 1; padding-left: 10px;">
        eventType: {{event.eventType}}
      </div>
    </div>
  </MazCard>
</template>

<script lang="ts" setup>
  import MazBtn from 'maz-ui/components/MazBtn'
  import MazCard from 'maz-ui/components/MazCard'

  import { onMounted, ref, onBeforeUnmount } from 'vue'

  import { useIdleTimeout } from 'maz-ui'

  const idleTimeout = useIdleTimeout({
    callback,
    options,
  })

  const event = ref({})

  const callback = ({ isIdle, eventType }) => {
    console.log({ isIdle, eventType })
    event.value = { isIdle, eventType }
  }

  const options = {
    timeout: 3000,
    immediate: false,
    once: false,
  }

  // should be executed on client
  const callback = ({ isIdle, event }) => {
    console.log({ isIdle, event })
    event.value = { isIdle, event }
  }

  onMounted(() => {
    idleTimeout.start()
  })

  onBeforeUnmount(() => {
    idleTimeout.destroy()
  })
</script>

Callback

type IdleTimeoutCallback = (payload: {
  isIdle: boolean
  eventType?: string
}) => void

Options

interface IdleTimeoutStrictOption {
  /** @default document.body */
  element?: HTMLElement | Document
  /** @default 60 * 1000 * 5 --> 5 minutes */
  timeout?: number
  /** @default false */
  once?: boolean
  /** @default true */
  immediate?: boolean
}

Actions

Start

Start tracking user - needed for SSR when immediate option is set to false (execute it on client side)

idle.start()

Pause

Will pause the timeout and events

idle.pause()

Resume

Resume the instance will reinit the timeout

idle.resume()

Reset

Reset the timeout of the instance like a restart

idle.reset()

Destroy

Will destroy the instance and stop tracking

idle.destroy()