Contextmenu hook in React
Using npm
npm install --save usecontextmenu-react
import {ContextMenu, ContextMenuItem, useContextMenu} from 'usecontextmenu-react';
See example folder
import React, {useRef} from "react";
import {ContextMenu, ContextMenuItem, useContextMenu} from 'usecontextmenu-react';
const Example = () => {
const {menuProps, onContextMenu, visibleOnPosition} = useContextMenu();
const blockStyle = {
height: '200px',
backgroundColor: 'tomato',
}
return (
<div>
<div onContextMenu={onContextMenu} style={blockStyle}/>
<ContextMenu {...menuProps}>
<ContextMenuItem>Lorem ipsum dolor</ContextMenuItem>
<ContextMenuItem disabled>Disabled</ContextMenuItem>
<ContextMenuItem onClick={() => console.log('Click!')}>onClick</ContextMenuItem>
<ContextMenuItem>Lorem ipsum dolor sit</ContextMenuItem>
</ContextMenu>
</div>
);
}
onShow: () => void
- Called when the menu is visible
onHide: () => void
- Called when the menu is hidden
This hook returns an object containing the following properties:
onContextMenu
- The event that triggered the context menu
menuProps
- Context menu props
visibleOnPosition({x: number, y: number})
- Display the context menu on custom position. You can provide x
and y
coordinates
MIT © n0mver