React component that adds a context menu to any component
npm install react-contextmenu-component --save
# OR
yarn add react-contextmenu-component
The only component needed to add a context menu is <ContextMenu />
. To use it, simply wrap the component that needs to have a context menu with the ContextMenu component like so :
import ContextMenu from 'react-contextmenu-component';
<ContextMenu
id="some-id"
options={[]}
>
<p>I'm inside a div with a context menu :)</p>
</ContextMenu>
The ContextMenu component has to have the following props :
id defines the identifier that allows to check if the right click has been made on the given ContextMenu component.
options defines all the options that have to be shown in the context menu. It is an array of arrays of option (see below). Each array in options will be rendered as a block followed by a separator.
An option is a single item rendered in the context menu. It contains the following properties :
Property | Type | Explanation | Default |
---|---|---|---|
label | string | Label of the option, as seen in the context menu. | N/A |
onClick | func | Function to fire when the option is option is clicked | no op |
disabled | boolean | Whether the option is disabled | false |
className | string | Name of the CSS class to apply on this given option | "" |
The ContextMenu component can have the following props :
onClick defines the method to fire when the div is left clicked.
className defines the CSS class(es) to use on the rendered div, which allows to easily style your component.
The context menu is easy to style; all you have to do is override the following classes :
class | Component aimed |
---|---|
.contextMenu | The whole context menu |
.contextMenu--option[:hover | :active | __disabled] | One option of the context menu |
.contextMenu--separator | A separator |
Run the sample app with the following commands
git clone https://github.com/TotemaT/React-ContextMenu-Component
cd React-ContextMenu-Component-Example/sample
npm start
The div shown underneath is rendered using <ContextMenu />
:
The context menu is shown after a right click :
The item is hovered :
The delete item has a special class making it red :
- This module has been created using React-NPM-Boilerplate
- The style and code is based on this codepen
- The sample project has been created using Create-React-App
- Test ContextMenu
- Test ContextMenuItem
- Test ContextMenuList
- Test ContextMenuSeparator (or not)
- Publish on npm
- Write a quick start guide
- Add a sample
- Add screenshots