Hooks

useLongPress

Gesture binder for opening a tapback picker (or anything else) on a touch/mouse long-press, right-click, or double-click. Spread the returned handlers onto the target element.

Riley

hold me down for 450ms

"use client";

import { useState } from "react";
import { ChatBubble, IMessageScreen, useLongPress } from "imessage-ui";

/** Fires on touch/mouse hold, right-click, or double-click. */
export default function UseLongPressDemo() {
  const [count, setCount] = useState(0);
  const longPress = useLongPress(() => setCount(c => c + 1), { delay: 450 });

  return (
    <IMessageScreen className="w-full max-w-sm rounded-2xl p-4">
      <div {...longPress}>
        <ChatBubble
          variant="received"
          text={count === 0 ? "hold me down for 450ms" : `long-pressed ${count}×`}
          senderName="Riley"
          avatar={{ initial: "R", gradient: ["#FF9FB2", "#E0506E"] }}
        />
      </div>
    </IMessageScreen>
  );
}

Usage

import { useLongPress } from "imessage-ui";

const lp = useLongPress(() => setOpen(true), { delay: 450 });
<div {...lp}>…</div>

API reference

useLongPress(onLongPress: () => void, options?: { delay?: number }): PointerHandlers

delay defaults to 450ms. Returns onPointerDown/Up/Leave/Cancel, onContextMenu (fires immediately, suppresses the native menu) and onDoubleClick handlers.