
Product
Introducing Rust Support in Socket
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
react-long-press-hook
Advanced tools
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
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.
npm install react-long-press-hook
or
yarn add react-long-press-hook
Enable context menus on long-press to provide users with additional options or actions.
Implement drag-and-drop functionality where a long-press initiates the dragging action.
Use long-press to confirm actions, such as deleting an item, to prevent accidental taps.
Create interactive tutorials that require users to long-press on elements to reveal tips or further instructions.
Develop custom gesture controls for touch interfaces, enhancing user interaction on mobile devices.
Incorporate long-press actions as part of game mechanics, such as charging a power-up or revealing hidden objects.
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;
useLongPress(callback, options)
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.handlers
(object
): Event handlers to spread on the target element.
Explore more useful packages by visiting my npm profile. Made with โค๏ธ by Ashish
FAQs
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
We found that react-long-press-hook demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.ย It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.
Product
Socketโs precomputed reachability slashes false positives by flagging up to 80% of vulnerabilities as irrelevant, with no setup and instant results.
Product
Socket is launching experimental protection for Chrome extensions, scanning for malware and risky permissions to prevent silent supply chain attacks.