How to Create a Right-Click Context Menu in React?

A right-click context menu is an important feature in web browsers to show the default options like copy, paste, inspect, etc to users to interact with browsers. You can also create your own custom right-click context menu.

This feature is especially useful in React applications where right-click actions are needed but standard right-click commands are not required. With a custom context menu, developers can provide users with a way to interact with their React applications in a way that is more intuitive and tailored to their needs.

So in this tutorial, you will learn about how to create a custom context menu (also known as right-click menu) in react application.

Let’s get started.

Create Context Menu in React

To create a custom right-click context menu in react application, we will use the useState hook to control the visibility of the menu options.

Then we will use the onContextMenu event listener to disable the default right-click menus and show the custom menu options. And the final step is to design the custom right-click menu options.

So let’s start on to create a custom right-click context menu.

Create React Application

The first step is to create a react application using the create-react-app tool. Use the following npx command to set up your initial state of react project.

npx create-react-app react-context-menu-app

Make sure you have installed Node.js and NPM on your system. You can check the guide on how to install Node and NPM and create React App?

Note: If you already have react application setup, you can skip this step and continue on next step.

Create React Function Component

Let’s now create a simple react function component to show the list of normal menu list options. For example, make Videos.js file with the following boilerplate.

import React from "react";

function Videos() {
	return (
		<>
			Video list here
		</>
	);
}

export default Videos;

Now we will add the logic of a function in this file with the list of videos and also call the event listener to disable the right-click menu and show the custom one. See the following code.

Videos.js

import React, { useState } from "react";
import ContextMenus from "./ContextMenus";

function Videos() {
	const [showRightMenu, setShowRightMenu] = useState(false);
	const [postion, setPosition] = useState({ x: 0, y: 0 });

	const contextMenu = (e) => {
		e.preventDefault();
		setPosition({ x: e.pageX, y: e.pageY });
		setShowRightMenu(true);
	};

	const hideContextMenu = () => {
		setShowRightMenu(false);
	};

	const VideoList = [
		{ id: 1, name: "Video 1" },
		{ id: 2, name: "Video 2" },
		{ id: 3, name: "Video 3" },
		{ id: 4, name: "Video 4" },
		{ id: 5, name: "Video 5" }
	];

	return (
		<>
			<ul onClick={hideContextMenu}>
				{VideoList.map((video) => {
					return (
						<li key={video.id} onContextMenu={contextMenu}>
							{video.name}
						</li>
					);
				})}
			</ul>

			{showRightMenu && <ContextMenus postion={postion} />}
		>
	);
}

export default Videos;

In the above code, we made a Videos function component by declaring the position and showRightMenu state variable using the useState hook.

Then we made the contextMenu arrow function to disable the default context menu of the browser and show the custom menu options by setting the position of it. Also made another arrow function to hide that context menu when you click somewhere else.

And then return the video list by using the map() function. You may notice that we used the oncontextmenu option in <li>, which is the event to trigger the right-click context menu options.

In the last, we show the context menu by importing the ContextMenus component file and calling the <ContextMenus />. We haven’t made it yet, we will make it now.

Now we have to create another react component for custom context menu options which we show to users when they right-click on a specific video item.

So create a ContextMenus.js file and add the following code to it. In this file, we can define the logic for each context menu option.

ContextMenus.js

import React from "react";

function ContextMenus(props) {
	const menuClick = (e) => {
		console.log("You clicked on '" + e.target.textContent + "'");
	};

	const MenuOptions = [
		{ id: 1, name: "Edit" },
		{ id: 2, name: "Cut" },
		{ id: 3, name: "Render" },
		{ id: 4, name: "Cliping" },
		{ id: 5, name: "Delete" }
	];

	return (
		<ul
			className="right-menus"
			style={{ top: props.postion.y, left: props.postion.x }}
		>
			{MenuOptions.map((option) => {
				return (
					<li key={option.id} onClick={menuClick}>
						{option.name}
					</li>
				);
			})}
		</ul>
	);
}

export default ContextMenus;

In the above code file, we simply made the context menu options and render them using the map() function. Also, set the position x & y by getting from the parent component as props.

We also add a onClick event on each menu option, so when you click on it, it will print the specific menu name. But you can perform your own logic by calling the functions on each of them.

Style the Conext Menu

So you have code to render the custom right-click context menu options in react application, now it’s time to design it. Here is the basic CSS style code. But you can design it as you want, you can use the react bootstrap or react inline style to design it.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul li {
	background-color: rgb(209, 197, 197);
	margin-bottom: 10px;
	padding: 5px;
}
ul.right-menus {
	position: absolute;
	width: 150px;
	background-color: rgb(68, 67, 67);
	margin: 0;
	padding: 5px;
	border-radius: 4px;
	margin-top: 15px;
}
ul.right-menus li {
	background: none;
	color: #fff;
	margin: 0;
	cursor: pointer;
}
ul.right-menus li:hover {
	background: #000;
}

See Also: How to Inline Style in React?