React Long Press Hook 👇

React hook for detecting click (or tap) and hold event.

• Easy to use
• Highly customizable options
• Thoroughly tested

Install

yarn add use-long-press

or

npm install --save use-long-press

Basic Usage

import React from 'react';
import { useLongPress } from 'use-long-press';

const Example = () => {
    const bind = useLongPress(() => {
        console.log('Long pressed!');
    });

    return <button {...bind}>Press me</button>;
};

Live example

Advanced usage

Hook first parameter, callback, can be either function or null (if you want to disable the hook).

Additionally you can supply options object as a second parameter.

As a result hook returns object with various handlers (depending on detect option), which can be spread to some element.

Definition

useLongPress(callback [, options]): handlers

Options

Long press hook can be adjusted using options object, which allow you to fit it to your needs.

Name	Type	Default	Description
threshold	number	400	Time user need to hold click or tap before long press callback is triggered
captureEvent	boolean	false	If React MouseEvent (or TouchEvent) should be supplied as first argument to callbacks
detect	Enum('mouse' | 'touch' | 'both')	'both'	Which event handlers should be returned in bind object. In TS this enum is accessible through LongPressDetectEvents
onStart	Function	() => {}	Called when element is initially pressed (before starting timer which detects long press). Can accept mouse or touch event if captureEvents option is set to true.
onFinish	Function	() => {}	Called when press is released (after triggering callback). Can accept mouse or touch event if captureEvents option is set to true.
onCancel	Function	() => {}	Called when press is released before threshold time elapses, therefore before long press occurs. Can accept mouse or touch event if captureEvents option is set to true.

Example

import React, { useState, useCallback } from 'react';
import { useLongPress } from 'use-long-press';

export default function AdvancedExample() {
    const [enabled, setEnabled] = useState(true);
    const callback = useCallback(event => {
        alert('Long pressed!');
    }, []);
    const bind = useLongPress(enabled ? callback : null, {
        onStart: event => console.log('Press started'),
        onFinish: event => console.log('Long press finished'),
        onCancel: event => console.log('Press cancelled'),
        threshold: 500,
        captureEvent: true,
        detect: 'both',
    });

    return (
        <div>
            <button {...bind}>Press and hold</button>
            <div>
                <label htmlFor="enabled">
                    <input
                        type="checkbox"
                        id="enabled"
                        checked={enabled}
                        onChange={() => setEnabled(current => !current)}
                    />
                    Hook enabled
                </label>
            </div>
        </div>
    );
}

License

MIT © minwork