1.1.15 • Published 7 months ago
@kongkiat/react-context-menu v1.1.15
Note:
@kongkiat/react-context-menu
Developed from react-contextmenu- Supports React
16.8
and above versions because this plugin solely uses React Hooks.
react-context-menu
Context menu plugin for React.
Table of contents
Browser Support
- IE 11 and Edge >= 12
- FireFox >= 38
- Chrome >= 47
- Opera >= 34
- Safari >= 8
Installation
$ npm install --save @kongkiat/react-context-menu
$ yarn add @kongkiat/react-context-menu
Sample Usage
import React from 'react';
import { ContextMenuTrigger, ContextMenu, ContextMenuItem, Submenu } from '@kongkiat/react-context-menu';
function App() {
return (
<div className="app">
<ContextMenuTrigger id="context-menu-1">
<div className="box">
Right Click On Me
</div>
</ContextMenuTrigger>
<ContextMenu
id="context-menu-1"
appendTo="body"
animation="zoom"
hideOnLeave={false}
preventHideOnScroll={true}
preventHideOnResize={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu"
onMouseLeave={() => console.log('Mouse left')}
onShow={(e) => console.log('is visible!', e)}
onHide={(e) => console.log('is hidden!', e)}
>
<ContextMenuItem><span>Menu Item 1</span></ContextMenuItem>
<ContextMenuItem>Menu Item 2</ContextMenuItem>
<ContextMenuItem>Menu Item 3</ContextMenuItem>
<ContextMenuItem>Menu Item 4</ContextMenuItem>
<ContextMenuItem.Submenu element={
<span>Submenu Item</span>
}>
<ContextMenuItem>Sub Menu Item 1</ContextMenuItem>
<ContextMenuItem>Sub Menu Item 2</ContextMenuItem>
<ContextMenuItem>Sub Menu Item 3</ContextMenuItem>
<ContextMenuItem>Sub Menu Item 4</ContextMenuItem>
</ContextMenuItem.Submenu>
</ContextMenu>
</div>
);
}
export default App;
Full example usage
<ContextMenuTrigger
id="my-contextmenu"
disable={false}
disableWhileShiftPressed={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-trigger"
>
{children}
</ContextMenuTrigger>
<ContextMenu
id="my-contextmenu"
appendTo="body"
animation="zoom"
hideOnLeave={false}
preventHideOnScroll={true}
preventHideOnResize={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu"
onMouseLeave={() => console.log('Mouse left')}
onShow={() => console.log('is visible!')}
onHide={() => console.log('is hidden!')}
/>
<ContextMenuItem
disabled={true}
preventClose={false}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-item"
onClick={() => console.log("is clicked!")}
>
{children}
</ContextMenuItem>
<ContextMenuItem.Submenu
element={<span>Submenu Item</span>}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-submenu"
>
{children}
</ContextMenuItem.Submenu>
APIs
<ContextMenuTrigger />
<ContextMenu />
<ContextMenuItem />
<ContextMenuItem.Submenu />
License
MIT License