Event Handling
useOnLongPress
A hook to detect long press on an element.
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>
</>
);
}
import { useOnLongPress } from "rooks";
export default function App() {
const handleLongPress = () => {
console.log("Long press detected");
};
const longPressRef = useOnLongPress(handleLongPress, {
duration: 1000,
onClick: handleTouchEnd,
});
return (
<>
<p>
Press and hold the button for 1000ms to trigger a console.log statement
</p>
<button ref={longPressRef}>Long press me</button>
</>
);
}
| 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 |
| 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 |