FrontEnd web
Published in

FrontEnd web

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

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/examplesread 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:

Read More on Medium:

Reference:

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajdeep singh

Rajdeep singh

JavaScript || Reactjs || Nextjs || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || Writer || https://officialrajdeepsingh.dev/