useRightClick

Hook that handles right-click events and long press on mobile devices

elements

low

test coverage

Last changed: 11 days ago

Installation

Library

CLI

Manual

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

Usage

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

Demo

source

Api

Parameters

Name	Type	Default	Note
target	HookTarget	-	The target element for right-click handling
callback	(event: RightClickEvents) => void	-	The callback function to be invoked on right click

Returns

void

Parameters

Name	Type	Default	Note
callback	(event: RightClickEvents) => void	-	The callback function to be invoked on right click

Returns

StateRef<Target>

Type declaration

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

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

export type RightClickEvent = MouseEvent | TouchEvent;

export interface RightClickPositions {
  x: number;
  y: number;
}

export interface UseRightClickOptions {
  // * The callback function to be invoked on right click end
  onEnd?: (event: RightClickEvent) => void;
  // * The callback function to be invoked on right click start
  onStart?: (event: RightClickEvent) => void;
}

export interface UseRightClick {
  (target: HookTarget, callback: (event: Event) => void, options?: UseRightClickOptions): void;

  <Target extends Element>(
    callback: (positions: RightClickPositions, event: Event) => void,
    options?: UseRightClickOptions,
    target?: never
  ): StateRef<Target>;
}

Source

Source • Demo

Contributors

D

debabin