How to add a custom context menu in react.js

Hey, My Name is Rajdeep Singh. I’m telling you How to add a Context Menu in react.js with some easy steps in the post.

Let Start It

What is the Context menu?

When clicking the mouse, Right-click opens a menu bar in DOM or Browser, Context Menu in react.js.

How to add a custom context menu in react.js

How to Create a Context Menu?

Creating a Context Menu is easy, with a few steps to add to your project. when you build a react.js app, use NPM

• Create react app npx create-react-app my-app
• cd my-app
• npm i react-contextmenu
• import { ContextMenu, MenuItem, ContextMenuTrigger } from "react-contextmenu";

When import all the stuff after using ContextMenuTrigger, ContextMenu, and MenuItem

All the props list Get Here:https://github.com/vkbansal/react-contextmenu/blob/master/docs/api.md

Play with code and read official docs:https://github.com/vkbansal/react-contextmenu

Note:

Are you build a Context menu without any library, then read this article

Implementing a custom context menu in react.js

Code:

import React, {Component} from "react";
// import all stuff about react-contextmenu
import {ContextMenu, MenuItem, ContextMenuTrigger} from "react-contextmenu";
import "./RightClick.scss";
export default class App extends Component {
// get object data after display on alert
handleClick = (e, data) => {
alert(`Clicked on menu ${data.item}`);
};
render() {
return (
<div className="bg">
{/* Note: ContextMenuTrigger and ContextMenu id same
More exmple :> https://github.com/vkbansal/react-contextmenu/tree/master/examples
read Doc:>https://github.com/vkbansal/react-contextmenu
*/}
<ContextMenuTrigger id="add_same_id">
<div className="hight">Right Click for Open Menu</div>
</ContextMenuTrigger>
<ContextMenu className="menu" id="add_same_id">
<MenuItem
onClick={this.handleClick}
data={{item: "Home"}}
className="menuItem"
>
Home
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Post"}}
className="menuItem"
>
Post
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Create Post"}}
className="menuItem"
>
Create Post
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "All Post"}}
className="menuItem"
>
All Post
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Stats"}}
className="menuItem"
>
Stats
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Chat"}}
className="menuItem"
>
Chat
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Settings"}}
className="menuItem"
>
Settings
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Profile"}}
className="menuItem"
>
Profile
</MenuItem>
<MenuItem
onClick={this.handleClick}
data={{item: "Logout"}}
className="menuItem"
>
Logout
</MenuItem>
</ContextMenu>
</div>
);
}
}

Demo:

Some Watch More Demos on the Official Web:

React ContextMenu

Read More on Medium:

How to read local JSON file in react js?

What’s react-bootstrap, and How do you use it?

How to add scss/sass in react.js?

Reference:

• https://www.npmjs.com/package/react-contextmenu
• https://github.com/vkbansal/react-contextmenu
• https://vkbansal.github.io/react-contextmenu/#/
• https://github.com/vkbansal/react-contextmenu/blob/master/docs/api.md
• https://github.com/vkbansal/react-contextmenu/blob/master/docs/usage.md

Conclusion

I hope you understand how to create a custom context menu in react.js.If you have any queries, mistakes, or suggestions, please tell me in the comment box after we update our article.

Contact me:

• https://www.facebook.com/officialrajdeepsingh/
• https://www.officialrajdeepsingh.dev/
• https://www.facebook.com/groups/JavaScriptcode/
• https://www.facebook.com/groups/pythoncodejoin/
• officialrajdeepsingh@gmail.com

Thanks for Reading