useHold()

The useHold() hook lets you detect long presses (holds) on target elements and trigger a handler after a set timeout is elapsed while the user is still holding down (click/touch) the element.

Import

import { useHold } from 'react-haiku';

Usage

Successful Holds: 0

import { useState } from 'react'
import { useHold } from "react-haiku"

export const Component = () => {
    const [count, setCount] = useState(0)
    const handleHold = () => setCount(count + 1);

    const buttonHold = useHold(handleHold, { delay: 2000 });

    return (
        <>
            <b>Successful Holds: {count}</b>
            <button {...buttonHold}>
                Press & Hold!
            </button>
        </>
    );
}

API

This hook accepts the following arguments:

• callback - the handler function to execute on successful holds
• options - the options object you can pass in
• • doPreventDefault - boolean, whether or not to prevent the default event
• • delay - number, a value in milliseconds, the amount of time the user needs to hold an element to trigger an event