useDoubleClick

Hook that defines the logic when double clicking an element

sensors

test coverage

Last changed: last month

Installation

Library

CLI

Manual

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

Usage

useDoubleClick(ref, () => console.log('double clicked'));
// or
const ref = useDoubleClick(() => console.log('double clicked'));

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element to be double clicked
callback	(event: DoubleClickEvents) => void	-	The callback function to be invoked on double click
options?	UseDoubleClickOptions	-	The options for the double click

Returns

boolean

Parameters

Name	Type	Default	Note
callback	(event: DoubleClickEvents) => void	-	The callback function to be invoked on double click
options?	UseDoubleClickOptions	-	The options for the double click

Returns

boolean

Type declaration

import type { HookTarget } from '@/utils/helpers';

import type { StateRef } from '../useRefState/useRefState';

export type DoubleClickEvents = MouseEvent | TouchEvent;

export interface UseDoubleClickOptions {
  // * The threshold time in milliseconds between clicks
  threshold?: number;
  // * The callback function to be invoked on single click
  onSingleClick?: (event: DoubleClickEvents) => void;
}

export interface UseDoubleClick {
  (
    target: HookTarget,
    callback: (event: DoubleClickEvents) => void,
    options?: UseDoubleClickOptions
  ): boolean;

  <Target extends Element>(
    callback: (event: DoubleClickEvents) => void,
    options?: UseDoubleClickOptions,
    target?: never
  ): StateRef<Target>;
}

Source

Source • Demo

Contributors

D

debabin