useLongPress

With longPress plugin, Detects when a user holds a click or touch for a set time, triggering a custom Alpine.js action or event.

You just need to install the plugin and use x-use-theme in your HTML like this:

<a x-use-longpress:1000="alert('Long Press Event !')">
   ...
</a>

Requirement:

Alpinejs (Version 3)

Installation

To use the longPress plugin, you can install it in two ways:

- Using npm (as a module):
- Using a CDN link (script tag):

1. Using npm (as a module):

You can install useTheme using the following command:

npm install alpineuse

Then, you can import it in app.js like this:

// AlpineUse
import useLongPressPlugin from "alpineuse/src/use-longpress";
Alpine.plugin(useLongPressPlugin);

If you want to use longPress with Livewire, you should manually bundle Livewire and Alpine, The final result will look like this:

// Livewire and Alpinejs
import {
    Livewire,
    Alpine,
} from "../../vendor/livewire/livewire/dist/livewire.esm";

// AlpineUse
import useLongPressPlugin from "alpineuse/src/use-longpress";
Alpine.plugin(useLongPressPlugin);

Livewire.start();

2. Using a CDN link (script tag):

Just drop the link in the <head> like this:

<html>
<head>
    <title>Title</title>

    <!-- TailwindCSS CDN -->
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

    <!-- AlpineUse (useLongPress) CDN -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/alpineuse@2.x.x/dist/use-longpress/index.min.js" defer></script>

    <!-- Alpine.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <style type="text/tailwindcss">
      @custom-variant dark (&:where(.dark, .dark *));
    </style>
  </head>
    <body>
       ...
    </body>
</html>

If you want to use useTheme with Livewire as a CDN, you can use it like this:

<html x-use-theme>
<head>
    <title>Title</title>

    <!-- Assets -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/alpineuse@2.x.x/dist/use-longpress/index.min.js" defer></script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
    @livewireScript
    <!-- Assets -->

    <!-- TailwindCSS Config -->
    <style type="text/tailwindcss">
      @custom-variant dark (&:where(.dark, .dark *));
    </style>
    <!-- TailwindCSS Config -->
  </head>
    <body>
       ...
    </body>
</html>

Basic Usage

First, you need to include x-use-longpress in your HTML.

<a x-use-longpress="alert('Long Press Event !')">
   ...
</a>

You can set a different time using x-use-longpress:5000, like this (time is in milliseconds):

<a x-use-longpress:5000="alert('Long Press Event !')">
   ...
</a>

Final result:

You can copy and paste it into your browser and it will work.

<!DOCTYPE html>
<html>
    <head>
        <title>Theme Example</title>

        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

        <script type="module" src="https://cdn.jsdelivr.net/npm/alpineuse@2.x.x/dist/use-longpress/index.min.js" defer></script>

        <script
            src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
            defer
        ></script>

        <style type="text/tailwindcss">
            @custom-variant dark (&:where(.dark, .dark *));
        </style>
    </head>
    <body class="bg-white dark:bg-black">
        <div class="mb-8 bg-zinc-50 dark:bg-zinc-900">
            <h1 class="text-zinc-950 dark:text-zinc-50">Hello World!</h1>
        </div>

        <div class="flex flex-col gap-y-2 bg-zinc-50 dark:bg-zinc-900" x-data>
            <button x-use-longpress="alert('LongPress 1000ms (Default)')">
                LongPress 1000ms
            </button>
            <button x-use-longpress:3000="alert('LongPress 3000ms')">
                LongPress 3000ms
            </button>
            <button x-use-longpress:5000="alert('LongPress 5000ms')">
                LongPress 5000ms
            </button>
        </div>
    </body>
</html>