react-pre-hooksuseContextMenu
Handle the user right clicks on a target element with this hook.
Parameters
- the
refobject of the target element (default iswindow).
Return Values
| Name | Type | Description |
|---|---|---|
| ref | RefObject | the target element reference. |
| clientX | Number | the x position of the mouse. |
| clientY | Number | the y position of the mouse. |
| canShow | Boolean | determins whether you should show or hide the menu. |
| toggle | Function | toggle between show and hide. you can force it using a boolean as the parameter like toggle(true). |
TIP
If you want to cancel the context menu, just use stopPropagation method of the mouse event:
ts
const handleRightClick = (event) => {
event.stopPropagation();
...
}const handleRightClick = (event) => {
event.stopPropagation();
...
}Example Usage
tsx
import { useContextMenu } from 'react-pre-hooks';
export default function Example() {
const { ref, canShow, clientX, clientY } = useContextMenu();
return (
<div ref={ref}>
{canShow && (
<ul style={{ left: clientX, top: clientY }}>
<li>Item 1.</li>
<li>Item 2.</li>
<li>Item 3.</li>
</ul>
)}
<p>right click anywhere!</p>
</div>
);
}import { useContextMenu } from 'react-pre-hooks';
export default function Example() {
const { ref, canShow, clientX, clientY } = useContextMenu();
return (
<div ref={ref}>
{canShow && (
<ul style={{ left: clientX, top: clientY }}>
<li>Item 1.</li>
<li>Item 2.</li>
<li>Item 3.</li>
</ul>
)}
<p>right click anywhere!</p>
</div>
);
}