Event Handling
useOnLongPress
Fires a callback when the user presses and holds a pointer on an element.
About
A hook to detect long press on an element.
Examples
Basic example
import { useOnLongPress } from "rooks";
export default function App() {
const handleLongPress = () => {
console.log("Long press detected");
};
const longPressRef = useOnLongPress(handleLongPress);
return (
<>
<p>
Press and hold the button for 500ms to trigger a console.log statement
</p>
<button ref={longPressRef}>Long press me</button>
</>
);
}Custom duration and touch end behavior
import { useOnLongPress } from "rooks";
export default function App() {
const handleLongPress = () => {
console.log("Long press detected");
};
const handleClick = () => {
console.log("Regular click detected");
};
const longPressRef = useOnLongPress(handleLongPress, {
duration: 1000,
onClick: handleClick,
});
return (
<>
<p>
Press and hold the button for 1000ms to trigger a console.log statement
</p>
<button ref={longPressRef}>Long press me</button>
</>
);
}Arguments
| Argument value | Type | Description | Defualt |
|---|---|---|---|
| callback | Function | Callback function to be called when long press is detected | undefined |
| options | Object | See table below | undefined |
| Options value | Type | Description | Default |
|---|---|---|---|
| duration | Number | The duration (in ms) after which long press is detected | 300 |
| onClick | Function | Fires on click | undefined |
Returns
| Return value | Type | Description | Defualt |
|---|---|---|---|
| ref | Callback Ref | A ref that can be used on the element you want to detect long press on | undefined |