React Tutorial- Learn To Create React Right Click Custom Context Menu Example

In this React article, we will learn how to create a custom context menu in React Js using React useState Hook in a function component without any trouble.

The menu that appears on the screen when we right-click on our screen is called the Context Menu.

 

How To Create React Right Click Custom Context Menu Example

Step 1- Build A React Application

We will create a new React app firstly with the help of create-react-app using the given command:

We have to make sure that we have already set up Node and NPM on our system:

npx create-react-app react-context-app

After installing the new app, we have to enter the project’s root:

cd react-context-app

 

Step 2- Set Up Bootstrap In React

Here, in this step, we will install bootstrap library which is quite handy

import React from 'react'
function Profile() {
  return (
    <div>RightContext page</div>
  )
}
export default RightContext

and helpful in building user interface components for web and mobile apps:

npm i bootstrap

Afterward, we have to head towards the src/App.js file where we will import the bootstrp CSS path as given below:

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
function App() {
  return <div></div>;
}
export default App;

 

Step 3- Make New Function Component

We will be creating a functional component here by simply creating the components/ directory with the RightContext.js file:

import React from 'react'
function Profile() {
  return (
    <div>RightContext page</div>
  )
}
export default RightContext

Step 4- Build The Context Menu In React

In our context menu, we will show four items. W can manifest the context menu by clicking on the colored area on our screen.

So, we need to manage the state that we can do it by useState hook. We will also require a couple of custom functions to capture and set the element’s position,x and y.

Then, we will update the code within the components/RightContext.js function component file:

import React from "react";
function RightContext() {
  const [context, setContext] = React.useState(false);
  const [xYPosistion, setXyPosistion] = React.useState({ x: 0, y: 0 });
  const showNav = (event) => {
    event.preventDefault();
    setContext(false);
    const positionChange = {
      x: event.pageX,
      y: event.pageY,
    };
    setXyPosistion(positionChange);
    setContext(true);
  };
  const hideContext = (event) => {
    setContext(false);
  };
  const [chosen, setChosen] = React.useState();
  const initMenu = (chosen) => {
    setChosen(chosen);
  };
  return (
    <>
      <h2 className="mb-3">React Right Click Context Menu Example</h2>
      <div
        className="contextContainer"
        onContextMenu={showNav}
        onClick={hideContext}
      >
        {chosen && <h1>"{chosen}" is chosen</h1>}
        {context && (
          <div
            style={{ top: xYPosistion.y, left: xYPosistion.x }}
            className="rightClick"
          >
            <div className="menuElement" onClick={() => initMenu("Refactor")}>
              Refactor
            </div>
            <div className="menuElement" onClick={() => initMenu("Cut")}>
              Cut
            </div>
            <div className="menuElement" onClick={() => initMenu("Copy")}>
              Copy
            </div>
            <div className="menuElement" onClick={() => initMenu("Paste")}>
              Paste
            </div>
          </div>
        )}
      </div>
    </>
  );
}
export default RightContext;

 

Step 5- Style The Right-Click Menu

After we have created the context menu, we need to write some custom CSS which will make our right-click custom menu look better.

Then, we open and update the src/App.js file with the code given:

.contextContainer {
  z-index: 1;
  width: 100%;
  height: 500px;
  background: #673ab7;
}
.rightClick {
  z-index: 12;
  position: fixed;
  background: rgb(240, 200, 1);
}
.menuElement {
  color: #222222;
  cursor: pointer;
  padding: 17px 36px;
}
.menuElement:hover {
  color: #fff;
  background: #009688;
}

 

Step 6- Update The Global Component

Now, we have to get into the src/App.js file and we will add the given code there:

import RightContext from "./components/RightContext";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
function App() {
  return (
    <div className="container">
      <RightContext />
    </div>
  );
}
export default App;

 

Step 7- Test React App

After reaching here at the final step, we will now run the development server using the given command:

npm start

 

Conclusion

Throughout this React tutorial, we have seen the step-by-step implementation of building a custom context menu component in React. Also, we have seen how to add a custom context menu in React Js with a function component.

 

Thanks