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
npm install react-long-press-hookUnlock 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.
- ๐ง 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.
``bash`
npm install react-long-press-hook`
or bash`
yarn add react-long-press-hook
`
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 (
{message}
export default App;
`
(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.$3
handlers (object`): Event handlers to spread on the target element.Explore more useful packages by visiting my npm profile. Made with โค๏ธ by Ashish