/reactuse

useDoubleClick

Detects double-clicks with optional single-click handler.

Usage

import { useDoubleClick } from "@siberiacancode/reactuse";

const doubleClickRef = useDoubleClick<HTMLButtonElement>(() =>
  console.log("double")
);
// or
useDoubleClick(ref, () => console.log("double"));

Example

import { useDoubleClick } from "@siberiacancode/reactuse";

export const LikeButton = () => {
  const doubleClickRef = useDoubleClick<HTMLButtonElement>(
    () => console.log("double"),
    {
      onSingleClick: () => console.log("single"),
    }
  );

  return <button ref={doubleClickRef}>Like</button>;
};

threshold:

Max time between clicks.

const doubleClickRef = useDoubleClick<HTMLButtonElement>(() => {}, {
  threshold: 400,
});

onSingleClick:

Single-click handler.

const doubleClickRef = useDoubleClick<HTMLButtonElement>(() => {}, {
  onSingleClick: () => console.log("single"),
});

Type Declarations

import type { HookTarget } from "@siberiacancode/reactuse";
import type { StateRef } from "@siberiacancode/reactuse";

export type DoubleClickEvents = MouseEvent | TouchEvent;
export interface UseDoubleClickOptions {
  threshold?: number;
  onSingleClick?: (event: DoubleClickEvents) => void;
}
export interface UseDoubleClick {
  (
    target: HookTarget,
    callback: (event: DoubleClickEvents) => void,
    options?: UseDoubleClickOptions
  ): void;
  <Target extends Element>(
    callback: (event: DoubleClickEvents) => void,
    options?: UseDoubleClickOptions,
    target?: never
  ): StateRef<Target>;
}
export declare const useDoubleClick: UseDoubleClick;