React Long Press Hook :point_down:

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

• Easy to use
• Highly customizable options
• Thoroughly tested

🎉 Version 3 is now available!

⚠️ Version 1 and 2 is now deprecated (explanation).

Use yarn add use-long-press@latest or npm install --save use-long-press@latest to install it.

Everything went through general refactor, and now useLongPress supports Pointer Events, properly handles releasing long press anywhere on the page and more...

Also use-long-press package is migrating to new react libraries monorepo which will be a common place for different react hooks and components coming in the future...

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

Version 1

Version 2

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.

You can supply custom context to the bind function like bind(context) and then access it from callbacks (onStart, onFinish, onCancel, onMove) second argument e.g.: onStart: (event, { context }) => ....

Definition

useLongPress(callback [, options]): handlers

Options

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

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'),
    onMove: event => console.log('Detected mouse or touch movement'),
    filterEvents: event => true, // All events can potentially trigger long press
    threshold: 500,
    captureEvent: true,
    cancelOnMovement: false,
    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