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
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 ​
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 • DemoContributors ​
D