DEV Community

loading...

Implementing context menu using react hooks

Rafi
I'm a developer who works mostly with Javascript.
Updated on ・2 min read

Sometimes you want to override the browsers default context menu in your react app. You can easily do this with a simple custom react hook. Such custom hook should tell you the X and Y position of the context menu and boolean to say whether you should render the component.

Here is a simple implementation of such custom react hook

import { useEffect, useCallback, useState } from "react";

const useContextMenu = outerRef => {
  const [xPos, setXPos] = useState("0px");
  const [yPos, setYPos] = useState("0px");
  const [menu, showMenu] = useState(false);

  const handleContextMenu = useCallback(
    event => {
      event.preventDefault();
      if (outerRef && outerRef.current.contains(event.target)) {
        setXPos(`${event.pageX}px`);
        setYPos(`${event.pageY}px`);
        showMenu(true);
      } else {
        showMenu(false);
      }
    },
    [showMenu, outerRef, setXPos, setYPos]
  );

  const handleClick = useCallback(() => {
    showMenu(false);
  }, [showMenu]);

  useEffect(() => {
    document.addEventListener("click", handleClick);
    document.addEventListener("contextmenu", handleContextMenu);
    return () => {
      document.removeEventListener("click", handleClick);
      document.removeEventListener("contextmenu", handleContextMenu);
    };
  }, []);

  return { xPos, yPos, menu };
};

export default useContextMenu;
Enter fullscreen mode Exit fullscreen mode

The hook adds two event listener one to intercept the right click and other to intercept the click event.

  1. When you right click you can get X and Y position of the click using event.pageX and event.pageY
  2. When you left click you toggle the menu so that it gets hidden

Here is a Menu component that uses that hook

import React from "react";

import useContextMenu from "./useContextMenu";

const Menu = ({ outerRef }) => {
  const { xPos, yPos, menu } = useContextMenu(outerRef);

  if (menu) {
    return (
      <ul className="menu" style={{ top: yPos, left: xPos }}>
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
      </ul>
    );
  }
  return <></>;
};

export default Menu;
Enter fullscreen mode Exit fullscreen mode

You render the Menu component based on the boolean and you pass the X and Y position as inline styles.

Here is the demo of the custom hook and here is corresponding source code.

Discussion (7)

Collapse
alialamine profile image
Ali Al Amine

How to implement this on table row? so user can right -click on a row and select an option.

Collapse
rafi993 profile image
Rafi Author

There are multiple ways to implement this depending on your table implementation. Are you expecting table rows to have constant height or variable height ?

Collapse
alyalameen profile image
alyalameen

Yes, rows will have fixed height, I appreciate your help

Thread Thread
rafi993 profile image
Rafi Author • Edited

Here is a really simple implementation

Thread Thread
alialamine profile image
Ali Al Amine

This is simple and awesome! Many thanks

Collapse
oybekalimat profile image
oybekalimat

Thanks for the hook.

Don't forget to add empty dependency to your useEffect, so it will behave like a ComponentDidMount. And also there is typo in removing click listener.

Collapse
timojkankaanpaa profile image
Timo Kankaanpää • Edited

Hi! Tried to apply your idea to mui-TreeView to create context menu there. Could you help me with some issue there?