@wireui/alpinejs-hold-directive

Alpine.js Hold Directive

🔥 Hold Directive

The hold directive allows you to add a hold action to an element and call it when the button is holding.

📚 Get Started

Prerequisites:

• Alpinejs 3.10+

Install

yarn add @wireui/alpinejs-hold-directive

or

npm i @wireui/alpinejs-hold-directive --save

Configure

// resources/js/app.js
import Alpine from 'alpinejs'

+ import HoldDirective from '@wireui/alpinejs-hold-directive'
+ HoldDirective.register(Alpine)

// or

+ import { directive } from '@wireui/alpinejs-hold-directive'
+ Alpine.directive('hold', directive)

window.Alpine = Alpine

Alpine.start()

How to use it?

You can use the x-hold directive to call any alpine.js action.

<div x-data="{
    count: 0,
    plus() { this.count++ },
    minus() { this.count-- }
}">
    <button x-hold.click="minus">Minus</button>
    <input x-model="count">
    <button x-hold.click="plus">Plus</button>
</div>

Directive API

Modifier	Description	Default
x-hold.500ms	Set the wait time to repeat the action
x-hold.repeat	Set the wait time to repeat the action	500ms
x-hold.repeat.500ms	Set the wait time to repeat the action
x-hold.delay	Set the wait time to start holding	500ms
x-hold.delay.500ms	Set the wait time to start holding
x-hold.click	Fire the hold action with the click event	false

All modifiers can be used together.

Just set the modifier duration after the modifer name, x-hold.delay.500ms.

📣 Follow the Author

Stay informed, follow @ph7jack on Twitter.

There will you see all the latest news about features, ideas, discussions and more...

💡 Philosophy

WireUI is and will always be FREE to anyone who would like to use it.

This project is created Pedro Oliveira, and it is maintained by the author with the help of the community.

All contributions are welcome!

License

MIT