React.js

How to add custom context menu in react.js?

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

Rajdeep Singh

• 4 min read
How to add custom context menu in react.js?

Let Start It:

What is the Context menu?

When click mouse Right-click opens a menu bar in DOM or Browser that is Context Menu in react.js.

How to Create a Context Menu?

Create a Context Menu is very easy, with 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 use ContextMenuTrigger, ContextMenu, and MenuItem.

All the props list Get Here:

vkbansal/react-contextmenu
Project is no longer maintained. Contribute to vkbansal/react-contextmenu development by creating an account on GitHub.
GitHubvkbansal

Play with code and read official docs:

vkbansal/react-contextmenu
Project is no longer maintained. Contribute to vkbansal/react-contextmenu development by creating an account on GitHub.
GitHubvkbansal

Note:

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

Implementing custom context menu in react.js
In this article, we will look at how we can override the default browser’s context menu and replace it with our own in react.js. Since we are talking about context menu, first we have to figure out…
MediumTarak

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

Demo

Some Watch More Demo on Official Web:

React ContextMenu

Read More on Medium:

How to read local JSON file in react js?
Hey, everybody my name Rajdeep Singh. In this post, I’m Tell you How to read the JSON file in reactjs within a simple step. Interesting fact map() method used only for the array but in our JSON file…
Rajdeep SinghRajdeep singh
What’s react-bootstrap and How to use it?
React-bootstrap is a front-End Stylesheet library. this library builds with two libraries one is react.js and secondly bootstrap. But when use bootstrap in react.js in this way you use…
Rajdeep SinghRajdeep singh

Reference:

Conclusion

I hope you understand how to create a custom context menu in react.js. If Any queries, mistakes, and Suggestions. Please tell me in the comment box after we update our article.

Contact me

Thanks for Reading