You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP โ†’
Socket
Book a DemoInstallSign in
Socket

react-long-press-hook

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-long-press-hook

Unlock the power of long-press interactions with react-press-and-hold! ๐Ÿš€ This lightweight and highly customizable React hook lets you easily detect and handle long-press events in your applications. Whether youโ€™re looking to enhance your UI with context

0.0.3
latest
Source
npmnpm
Version published
Maintainers
1
Created
Source

๐Ÿ“ฑ react-long-press-hook

Unlock the power of long-press interactions with react-long-press-hook! ๐Ÿš€ This lightweight and highly customizable React hook lets you easily detect and handle long-press events in your applications. Whether youโ€™re looking to enhance your UI with context menus, drag-and-drop functionality, action confirmations, or interactive tutorials, react-long-press-hook has got you covered.

โœจ Features

  • ๐Ÿ”ง Customizable: Easily configure thresholds, prevent default behavior, and more.
  • ๐Ÿชถ Lightweight: Minimal impact on your bundle size.
  • ๐Ÿ‘ Accessible: Works with both touch and mouse events.
  • โšก Efficient: No unnecessary re-renders or performance hits.

๐Ÿ“ฆ Installation

npm install react-long-press-hook

or

yarn add react-long-press-hook

๐Ÿ“š Use Cases

๐Ÿ“œ Context Menus

Enable context menus on long-press to provide users with additional options or actions.

๐Ÿ–ฑ๏ธ Drag-and-Drop

Implement drag-and-drop functionality where a long-press initiates the dragging action.

โœ… Action Confirmations

Use long-press to confirm actions, such as deleting an item, to prevent accidental taps.

๐ŸŽ“ Interactive Tutorials

Create interactive tutorials that require users to long-press on elements to reveal tips or further instructions.

๐Ÿ•น๏ธ Custom Gesture Controls

Develop custom gesture controls for touch interfaces, enhancing user interaction on mobile devices.

๐ŸŽฎ Game Mechanics

Incorporate long-press actions as part of game mechanics, such as charging a power-up or revealing hidden objects.

๐Ÿš€ Usage

Here is a basic example of how to use the useLongPress hook in your React application:

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

const App = () => {
  const [message, setMessage] = useState('');

  const onLongPress = () => {
    setMessage('Long press detected!');
  };

  const onPressHold = () => {
    setMessage('Press and hold in progress...');
  };

  const onPressRelease = () => {
    setMessage('Press released');
  };

  const longPressEvent = useLongPress(onLongPress, {
    onStart: onPressHold,
    onFinish: onPressRelease,
    threshold: 2000, // milliseconds
    preventDefault: true,
    cancelOnMove: true,
  });

  return (
    <div>
      <button {...longPressEvent}>Long Press Me</button>
      <p>{message}</p>
    </div>
  );
};

export default App;

๐Ÿ“š API

useLongPress(callback, options)

Parameters

  • callback (function): The function to call when a long-press is detected.
  • options (object): Configuration options for the hook.
    • onStart (function): Function to call when the press starts.
    • onFinish (function): Function to call when the press ends.
    • threshold (number): Time in milliseconds to detect a long-press. Default is 300.
    • preventDefault (boolean): Whether to prevent the default context menu on long-press. Default is true.
    • cancelOnMove (boolean): Whether to cancel the long-press if the pointer moves. Default is false.
    • stopPropagation (boolean): Whether to stop event propagation. Default is false.

Returns

handlers (object): Event handlers to spread on the target element.

Check Out My Other Packages

Explore more useful packages by visiting my npm profile. Made with โค๏ธ by Ashish

Keywords

Long-press

FAQs

Package last updated on 17 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts