React Holdable

react-holdable is a small and simple React component that allows you to have clickable elements that support both click and hold events.

React does not provide a built-in hold or long-press event, so this package keeps that behavior as a tiny wrapper component without any build step.

Installation

npm install react-holdable

Usage

import React from 'react'
import Holdable from 'react-holdable'

export default function MyComponent() {
  return (
    <Holdable
      onClickComplete={() => console.log('Clicked')}
      onHoldComplete={() => console.log('Hold')}>
      <button>Click and hold me</button>
    </Holdable>
  )
}

react-holdable supports both short click and longer hold events, so you can have buttons that behaves differently when clicked and hold.

When user clicks on a wrapped element (e.g. button), onClickComplete will be invoked.

When users clicks and holds for 1000 ms (this can be changed via timeout property), onHoldComplete will be invoked.

Properties

• onClickComplete: short click handler.
• onHoldComplete: hold handler.
• timeout: timeout in milliseconds after which onHoldComplete is invoked (default: 1000).
• className: extra classes passed to the wrapper element.

Local Demo

For manual testing, open examples/index.html in a browser through a simple local server. The examples/ directory is for development only and is not included in the npm package.

Feedback and support

For questions and bug reports please refer to GitHub issues: https://github.com/martynasjocius/react-holdable/issues