useDoubleClick

Hook that defines the logic when double clicking an element

elements

medium

test coverage

Last changed: 24 days ago

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

void

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

{ ref: StateRef<Target> }

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
  ): void;

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

Source

Source • Demo

Contributors

D

debabin