useDoubleClick

React sensor hook that controls double click and single click

useDoubleClick lets you distinguish between single-click and double-click interactions on a DOM element. It uses a configurable latency delay to determine whether a click is a single click or the first click of a double-click sequence. Pass a target ref and provide separate onSingleClick and onDoubleClick handlers to respond to each interaction.

When to Use

• Implementing “click to select, double-click to edit” patterns on list items or table cells
• Adding double-click-to-zoom on images or maps while preserving single-click for other actions
• Any UI where single and double clicks must trigger distinct behaviors on the same element

Notes

• Latency: The default delay between single and double click detection can be customized via the latency option (in milliseconds). A shorter latency makes single clicks feel faster but may miss slower double clicks.
• Event types: Supports both mouse and touch events, making it suitable for desktop and mobile.
• Cleanup: All event listeners are removed automatically when the component unmounts.

Usage

function Demo() {
  const element = useRef<HTMLButtonElement>(null);
  const [text, setText] = useState("no click");

  useDoubleClick({
    target: element,
    onSingleClick: () => {
      setText("single click");
    },
    onDoubleClick: () => {
      setText("double click");
    },
  });
  return (
    <div>
      <button ref={element}>Click Me</button>
      <p>{text}</p>
    </div>
  );
};

API

useDoubleClick

Returns

void

Arguments

UseDoubleClickProps

BasicTarget

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue

type TargetValue<T> = T | undefined | null;

TargetType

type TargetType = HTMLElement | Element | Window | Document | EventTarget;