@kevinbatdorf/alpine-auto-interval NPM

Alpine — Auto Interval

A lightweight interval plugin for Alpine.js that lets you call a function every n milliseconds

GitHub file size in bytes GitHub tag (latest by date)

About

Useful when you need to change state every n seconds, such as in a slideshow, or even to check on some external data.

<!-- Counter example -->
<div
  x-data="{ count: 0, add() { this.count++ } }"
  x-alpine-interval="add"
  x-text="count">
</div>

Demo

The timer defaults to 1000ms but you can pass in parameters to override

<!-- Counter example with timer adjusted -->
<div
  x-data="{ count: 0, add() { this.count++ } }"
  x-alpine-interval="{ callback: 'add', timer: 3000 }"
  x-text="count">
</div>

Demo

The delay defaults to the timer but you can pass in parameters to override.

<!-- Counter example with delay adjusted  -->
<div
  x-data="{ count: 0, add() { this.count++ } }"
  x-alpine-interval="{ callback: 'add', delay: 3000 }"
  x-text="count">
</div>

Demo

Installation

Include the following <script> tag in the <head> of your document (before Alpine):

<script src="https://cdn.jsdelivr.net/gh/kevinbatdorf/alpine-auto-interval@0.x.x/dist/index.js"></script>

Manual

If you wish to create your own bundle:

npm install kevinbatdorf/alpine-auto-interval --save

Then add the following to your script:

import 'alpine-auto-interval'
import 'alpinejs'

License

Licensed under the MIT license, see LICENSE.md for details.

alpinejs

@infinitebrahmanuniverse/nolb-_kev @everything-registry/sub-chunk-515 @zalastax/nolb-_kev

0.1.0

4 years ago