useLongPress

Executes a function when the user long press a given element.

Installation

npx rabbithook@latest add use-long-press

Usage

App.tsx

import useLongPress from "@/hooks/use-long-press";

function Component() {
  const ref = useRef<HTMLDivElement>(null);

  useLongPress(ref, () => {
    console.log("Long pressed");
  });

  return <div ref={ref} />
}

Code

Typescript

use-long-press.ts

import React, { useEffect } from "react";
import useEventListener from "../use-event-listener";
import useTimeout from "../use-timeout";

function useLongPress(
  ref: React.RefObject<Element>,
  cb: Function,
  { delay = 250 } = {}
) {
  const { reset, clear } = useTimeout(cb, delay);

  useEffect(clear, []);

  useEventListener("mousedown", reset, ref.current);
  useEventListener("touchstart", reset, ref.current);
  useEventListener("mouseup", clear, ref.current);
  useEventListener("mouseleave", clear, ref.current);
  useEventListener("touchend", clear, ref.current);
}

export default useLongPress;

Javascript

use-long-press.js

import { useEffect } from "react";
import useEventListener from "../use-event-listener";
import useTimeout from "../use-timeout";

function useLongPress(ref, cb, { delay = 250 } = {}) {
  const { reset, clear } = useTimeout(cb, delay);

  useEffect(clear, []);

  useEventListener("mousedown", reset, ref.current);
  useEventListener("touchstart", reset, ref.current);
  useEventListener("mouseup", clear, ref.current);
  useEventListener("mouseleave", clear, ref.current);
  useEventListener("touchend", clear, ref.current);
}

export default useLongPress;