I search for user idle plugin/decision for livewire / alpine app

Question

Are there something like https://github.com/soixantecircuits/idle-vue ( detects when the user hasn't interacted with your app for a while) compatible with laravel 7 /livewire 1.3 / turbolinks:5 / alpine@v2 ?

Thanks!

Answer 1

Assuming you've got idle-js installed somehow, you can do:

<div
  x-data="{ idle: false }"
  x-init="_idle = new IdleJs({
    onIdle: () => { idle = true },
    onActive: () => { idle = false },
  });
  _idle.start();"
>
  <p x-text="idle ? 'Idle': 'Not idle'"></p>
</div>

I've got it working as a codepen