Rajdeep Singh
Published in

Rajdeep Singh

How to add 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 click mouse Right-click opens a menu bar in DOM or Browser that is Context Menu in react.js

How to add custom 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: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 Demo on 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, and suggestions, please tell me in the comment box after we update our article.

--

--

--

Computer Science & Biology & Bioinformatic

Recommended from Medium

Event Bubbling, Capturing — Everything that you should know

How to deal with complex APIs

How to install Font awesome on Rails 6 APP

Ionic React: One App that runs everywhere

OutSystems React/Mobile: The 10 rules of Role Based Access Control

頻 (Japanese Kanji) — repeatedly, recur

Dependency Injection in Javascript with no Libraries

1/1/2022 Class Face To Face

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 || Python || Rust || Biotechnology || Bioinformatic || Front-end Developer || https://officialrajdeepsingh.dev/

More from Medium

Journey of Cloning practo.com

Form Validation in React JS and React-Bootstrap without using any library

React JS — Introduction