useOnLongPress

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>
    </>
  );
}

Open Sandbox

Custom duration and touch end behavior

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>
    </>
  );
}

Open Sandbox

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

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

❇️ State

🔥 Effects

⚛️ UI

✨ Misc

🚀 Events

📝 Form

🚃 Navigator

useOnLongPress

About

Examples

Basic example

Custom duration and touch end behavior

Arguments

Returns

Join the community!