React Right-click menu example. Context menu, aka contextual, shortcut, or popup menu, is an essential GUI element. It manifests on the screen when a user right-clicks using a mouse.

This comprehensive tutorial will teach you how to create a custom context menu in React js application without using an open source or npm library.

A context menu is a handy UI component that provides a limited set of options that resides in the current state. The context menu in React appears when you simply right-click on your browser screen.

Right-click menu is somewhat identical to the operating system’s native context menu. Thus, we will use React Hook in the functional component to add the custom context menu in React.

Create React Project

We are creating a new React app to create the react context menu component.

If you already have a React app, skip this step and jump on to the subsequent step.

npx create-react-app my-react-app

Make sure to step inside the project folder.

cd my-react-app

Add Bootstrap Module

You can effortlessly install the bootstrap library to create the basic layout in your React app. However, it is totally optional.

npm install bootstrap

Create Component File

Now, you require to create the features/ContextMenu.js file.

As soon as you add the given code, following file will turn into a simple functional component.

import React from 'react'

function ContextMenu() {
  return (
    <div></div>
  )
}

export default ContextMenu

Create Right Click Context Menu Component

Now, you have to add the suggested code into the features/ContextMenu.js file.

import React, { useState } from "react";

function ContextMenu() {
  const [isVisible, setIsVisible] = useState(false);

  const [pos, setPos] = useState({ x: 0, y: 0 });

  const displayMenu = (e) => {
    e.preventDefault();

    setIsVisible(false);
    const updatedPos = {
      x: e.pageX,
      y: e.pageY,
    };

    setPos(updatedPos);
    setIsVisible(true);
  };

  const hideMenu = (event) => {
    setIsVisible(false);
  };

  const [selectedOpt, setSelectedOpt] = useState();
  const initMenu = (selectedOpt) => {
    setSelectedOpt(selectedOpt);
  };

  return (
    <div
      className="menu-wrapper"
      onContextMenu={displayMenu}
      onClick={hideMenu}
    >
      {selectedOpt && <h1>"{selectedOpt}" is selected</h1>}

      {isVisible && (
        <div style={{ top: pos.y, left: pos.x }} className="menu-block">
          <div className="elOption" onClick={() => initMenu("Back")}>
            Back
          </div>
          <div className="elOption" onClick={() => initMenu("Forwoard")}>
            Forwoard
          </div>
          <div className="elOption" onClick={() => initMenu("Reload")}>
            Reload
          </div>
          <div className="elOption" onClick={() => initMenu("Print")}>
            Print
          </div>
        </div>
      )}
    </div>
  );
}

export default ContextMenu;

Register Component in App.js

To make the component work, ensure that you have imported into the src/App.js file. Place the given code into the global component.

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import ContextMenu from "./features/ContextMenu";

const App = () => {
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Custom Context Menu Example</h2>
      <ContextMenu />
    </div>
  );
};

export default App;

Add CSS to Context Menu

To design the custom context menu, we will use the custom CSS. Hence, go to src/index.css file and insert the following styling code to the file.

.menu-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  z-index: 1;
  background: rgb(233, 233, 231);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.menu-block {
  z-index: 10;
  position: fixed;
  background: rgb(93, 11, 235);
}

.elOption {
  cursor: pointer;
  padding: 16px 35px;
  color: white;
}

.elOption:hover {
  background: rgb(249, 208, 4);
  color: black;
}

Start Development Server

Start the react server, we can do it by running the provided command.

npm start

Open the react app with the help of the following URL:

http://localhost:3000

Conclusion

We have learned how to build the custom context menu or the right-click menu in a React application without using the open-source package.