Skip to content

useRightClick ​

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

elements
test coverage
Last changed: 2 days ago

Installation ​

Library
CLI
Manual
typescript
import { useRightClick } from '@siberiacancode/reactuse';

Usage ​

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

Demo ​

Api ​

Parameters

NameTypeDefaultNote
targetHookTarget-The target element for right-click handling
callback(event: RightClickEvents) => void-The callback function to be invoked on right click

Returns

void

Parameters

NameTypeDefaultNote
callback(event: RightClickEvents) => void-The callback function to be invoked on right click

Returns

StateRef<Target>

Type declaration ​

typescript
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
debabin

Released under the MIT License.