htmx-ext-hold
v0.2.0
Published
An htmx extension to trigger events on 'hold' (mousedown/touchstart for a duration)
Readme
htmx-ext-hold
An htmx extension to trigger events on 'hold' (mousedown/touchstart for a duration).
Installation
Via CDN
Add the script tag after HTMX:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/htmx-ext-hold@latest/dist/index.mjs"></script>Via NPM
npm install htmx-ext-holdThen import in your JavaScript:
import 'htmx-ext-hold';Usage
Enable the extension on your page:
<body hx-ext="hold">
<button hx-trigger="hold" hx-post="/action">Hold me for 500ms (default)</button>
<button hx-trigger="hold delay:1000ms" hx-post="/action">Hold me for 1 second</button>
</body>The hold trigger will fire after the specified delay (default 500ms) when the element is pressed and held.
Visual feedback hooks
While the hold is active the extension exposes two progress indicators you can opt into:
- A CSS custom property
--hold-progressscoped to the element. It moves from0to1during the hold, so you can drive fills, animations, or transforms directly from CSS. - A
data-hold-progressattribute with the same value expressed as an integer percentage (0–100), handy for text labels or aria-live updates without extra JavaScript.
<button
hx-trigger="hold delay:750ms"
hx-post="/action"
class="hold-button"
>
Hold 750ms
</button>
<style>
.hold-button {
position: relative;
overflow: hidden;
}
.hold-button::before {
content: "";
position: absolute;
inset: 0;
background: rgba(67, 170, 139, 0.4);
transform-origin: left;
transform: scaleX(var(--hold-progress));
pointer-events: none;
}
</style>Development
bun install
bun run build
bun testPublish
npm login
bun run prepublishOnly
npm publish