use-long-press

React Long Press Hook :point_down:

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>
  )
}

Example

Advanced usage

Callback can be either function or null if you want to disable the hook.

Additionally hook accepts options object as a second argument.

useLongPress(callback: (event?: MouseEvent | TouchEvent) => void | null, options?: LongPressOptions);

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.

License

MIT © minwork