@kongkiat/react-context-menu NPM

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.

Browser Support
Installation
Sample Usage
Full Example Usage
APIs
LICENSE

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>