🧩 UseIdle

A magic helper to track user interaction. It exposes the following properties:

Property	Type	Description
`isIdle`	`boolean`	Whether the user is idle or not

💾 Installation

As script tag, include the <script> tag in the <head> of your document just before Alpine:

<script src="https://cdn.jsdelivr.net/npm/alpinejs-toolkit/dist/useIdle/cdn.min.js" defer></script>

As module:

import Alpine from 'alpinejs';
import UseIdle from 'alpinejs-toolkit/useIdle';

Alpine.plugin(UseIdle);
Alpine.start();

The helper accepts:

<div x-data="$useIdle()">User is: <span x-text="isIdle ? 'idle' : 'active'"></span></div>

Note

Options are always merged, with the magic options having an higher priority.

Option	Default	Description
`initialState`	`false`	Whether to consider the user initially idle
`timeout`	`3000`	Time in milliseconds after which to consider the user idle
`events`	`['mousemove', 'mousedown', 'resize', 'keydown', 'touchstart', 'wheel']`	Events to listen on to detect if the user is active or not

Pass options when using the script tag:

<script>
  window.AlpineUseIdleOptions = { timeout: 5000 };
</script>

Pass options when using the module:

Alpine.plugin(UseIdle.withDefaults({ timeout: 5000 }));

Pass options for a given magic usage:

<div x-data="$useIdle({ initialState: true })">
  <!-- ... -->
</div>