@alpine-collective/toolkit-interval

1.0.2 • Public • Published

$interval

GitHub tag (latest by date) npm bundle size

A magic helper to run a function every n milliseconds in Alpine.Js.

Usage

The helper will run a function every x milliseconds.

<div x-init="$interval(() => console.log('Hello World'), 1000)"></div>

The first parameter of the helper is the function to run while the second parameter is the interval.

Advanced usage

It's possible to use a config object as a second parameter to specify additional options:

Property Description
timer Timer in milliseconds.
delay Delay the first run. N.B. The first run is also delayed by the timer time.
forceInterval Ignore the browser animation request mechanism. Default is false

⚠️ By default, $interval will run your function every nth millisecond when browser provides an animation frame (via requestAnimationFrame). This means that the function will not run if the browser tab is not visible unless forceInterval is set to true.

Pausing the timer

If the component defines a property called autoIntervalTest, the function will only be called when the said property is set to a truthy value.

Installation

This helper is part of alpine-collective/toolkit. If you have already installed the main library, you won't need to do anything else. If you desire to install the helper as a standalone packacage, follow the steps below.

CDN

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

<script src="https://unpkg.com/@alpine-collective/toolkit-interval@1.0.2/dist/cdn.min.js" defer></script>

or

<script src="https://cdn.jsdelivr.net/npm/@alpine-collective/toolkit-interval@1.0.2/dist/cdn.min.js" defer></script>

NPM

If you would like to bundle the plugin yourself, install it via NPM:

npm install @alpine-collective/toolkit-interval --save-dev

You can then register the plugin with Alpine:

import Alpine from 'alpinejs'
import Interval from '@alpine-collective/toolkit-interval'

Alpine.plugin(Interval)

Alpine.start()

Readme

Keywords

none

Package Sidebar

Install

npm i @alpine-collective/toolkit-interval

Weekly Downloads

89

Version

1.0.2

License

MIT

Unpacked Size

8.4 kB

Total Files

6

Last publish

Collaborators

  • simotod