htmx-ext-hold

An htmx extension to trigger events on 'hold' (mousedown/touchstart for a duration).

Installation

$3

Add the script tag after HTMX:

``html


`

$3

`bash
npm install htmx-ext-hold
`

Then import in your JavaScript:

`javascript
import 'htmx-ext-hold';
`

Usage

Enable the extension on your page:

`html

Hold me for 500ms (default)
Hold me for 1 second

`

The hold trigger will fire after the specified delay (default 500ms) when the element is pressed and held.

$3

While the hold is active the extension exposes two progress indicators you can opt into:

- A CSS custom property --hold-progress scoped to the element. It moves from 0 to 1 during the hold, so you can drive fills, animations, or transforms directly from CSS.
- A data-hold-progress attribute with the same value expressed as an integer percentage (0–100), handy for text labels or aria-live updates without extra JavaScript.

`html
hx-trigger="hold delay:750ms"
hx-post="/action"
class="hold-button"
>
Hold 750ms



`

Development

`bash
bun install

bun run build

bun test
`

Publish

`bash
npm login

bun run prepublishOnly

npm publish
``