npm i react-context-menu
Or
yarn add react-context-menu
-
A menu is an array of small menu entries.
-
A menu entry looks like this,
{ text: "Label for the entry" }
-
You can choose to do something, when it's clicked
{ text: "Label1", onClick: () => console.log('Label1 was Clicked') }
-
Like this you can make a simple menu,
[ { text: "Label1", onClick: () => console.log('Label1 was Clicked') }, { text: "Label2", onClick: () => console.log('Label2 was Clicked') } ]
-
A menu item can also have it's own submenu,
{ text: "Label for the entry", sub: [...another menu...] }
-
Instead of plaintext you can also use a react component
{ component: <>Github <img src="https://github.com/Heaust-ops" /></> }
-
Import the wrapper div, this defines the region for context menu action
import ContextMenuWrapperDiv from "./ContextMenu/ContextMenuWrapperDiv";
-
Make a menu collection,
menuCollection = { hotkeys: { shifta: someMenu }, contextMenu: someOtherMenu }
-
Use the wrapper div and pass it the menu collection
<ContextMenuWrapperDiv menus={menuCollection}> {...content...} </ContextMenuWrapperDiv>
-
It behaves like a normal div and you can use all of a normal div's props
-
Moreover it takes in 2 additional props, itemStyle and wrapperStyle
-
itemStyle can be used to style the items in the context menu
-
wrapperStyle can be used to style the wrapper of the context menu itself
-
Import the ContextMenu Component
import { ContextMenu } from "react-procedural-context-menu";
-
Unlike the wrapper div this takes in a single menu,
<ContextMenu contextMenuItems={someMenu} >
-
This component is just the menu with no activation logic
-
You have to implement the logic of when and where to render it yourself
-
It still has itemStyle and wrapperStyle for the same reasons
-
Tip: You can use wrapperStyle to position it