Note:

react-context-menu 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
• Installation
• Sample Usage
• Full Example Usage
• Live Demo
• Example Code
• APIs
• Styling
• Contributions
• 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">
                <ContextMenuItem>Menu Item 1</ContextMenuItem>
                <ContextMenuItem>Menu Item 2</ContextMenuItem>
                <ContextMenuItem>Menu Item 3</ContextMenuItem>
                <ContextMenuItem>Menu Item 4</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>
                </Submenu>
            </ContextMenu>
        </div>
    );
}

export default App;

Full example usage

<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!")}
/>

<ContextMenuTrigger
    id="my-contextmenu"
    disable={false}
    disableWhileShiftPressed={true}
    attributes={{
        'aria-label': 'Some text',
        'aria-labelledby': 'Some text'
    }}
    className="my-context-menu-trigger"
/>

<Submenu
    element={<span>Submenu Item</span>}
    attributes={{
        'aria-label': 'Some text',
        'aria-labelledby': 'Some text'
    }}
    className="my-context-menu-submenu"
/>

Live Demo

Live demo is unavailable here

Example Code

Example code is available here

APIs

<ContextMenu />

<ContextMenuItem />

<ContextMenuTrigger />

<Submenu />

Styling

Styling is totally up to you. You can use CSS or even SCSS to customize the styling part. Below are the classes you can consider for styling

• menu-trigger (Right click area wrapper)
• contextmenu (The Context Menu)
• contextmenu__item (Each Context Menu item)
• contextmenu__item--disabled (Context Menu item)
• submenu (Context Submenu)
• submenu__item (Context Submenu item)

Contributions

Any kind of contribution would be much appreciated. It could be small change in the doc or even any kind of advice. You can create issues if you feel any feature which is missing which solves bigger problems.

License

MIT License