React-component allows you to replace the browser context menu with your own
By npm
$ npm install react-ultimate-contextmenu
By Yarn
$ yarn add react-ultimate-contextmenu
This simple example demonstrate different cases:
import React, { Fragment } from 'react'
import { FaPhoneSquare } from 'react-icons/fa'
import {
MenuProvider,
Menu,
MenuItem,
Submenu,
MenuFilter,
Separator
} from 'react-ultimate-contextmenu'
const MyAwesomeComponent = ({ doSomethingAwesome, supportList, callSupport }) =>
<MenuProvider>
This is my awesome component
<Menu>
<MenuItem href='https://my-awesome-site.com' target='_blank'>Go to my awesome site!<MenuItem>
<MenuItem onClick={doSomethingAwesome}>Do something awesome!<MenuItem>
{supportList.length && <Fragment>
<Separator />
<Submenu icon={<FaPhoneSquare />} label='Support...'>
<MenuFilter available={supportList.length > 10}></MenuFilter>
{supportList.map((item, index) =>
<MenuItem key={index} onClick={() => { callSupport(index) }}>
Call support {index + 1}
</MenuItem>
)}
</Submenu>
</Fragment>}
</Menu>
</MenuProvider>
export default MyAwesomeComponent
This component define a context menu swap scope. It catches the contextmenu
event and displays the child Menu component.
This is the main container for context menu elements.
Single menu item like button or link. By default this is button, but if you define prop href
it will be a link and you can define all available link's props.
- leftIcon - (react-element) icon to the left of the label
- rightIcon - (react-element) icon to the right of the label
- disabled - (boolean) disabled state
- href - (string) link address
- target - (string) target specifies where to open the link
- onClick - (function) handler of
click
event
Container for submenu elements.
- icon - (react-element) icon to the left of the label of the parent submenu item
- label - (string) label of the parent submenu item
- disabled - (boolean) disabled state of parent submenu item
Filter of menu items
- available - (boolean) filter availability flag
Dividing line between menu items.