useDoubleClick

React sensor hook that controls double click and single click

Usage

Live Editor

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

Result

Loading...

API

useDoubleClick

Returns

void

Arguments

Argument	Description	Type	DefaultValue
props	-	UseDoubleClickProps (Required)	-

UseDoubleClickProps

Property	Description	Type	DefaultValue
target	dom element	BasicTarget<Element> (Required)	-
latency	latency time (milliseconds)	number | undefined	-
onSingleClick	single click event handler	((e?: MouseEvent | TouchEvent) => void) | undefined	-
onDoubleClick	double click event handler	((e?: MouseEvent | TouchEvent) => void) | undefined	-

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;