Implementing context menu using react hooks

#javascript #react #reacthooks

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;

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

When you right click you can get X and Y position of the click using event.pageX and event.pageY
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;

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.

Top comments (7)

Ali Al Amine • Apr 27 '20

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

Rafi • Apr 27 '20

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

alyalameen • Apr 27 '20

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

Rafi • Apr 28 '20 • Edited

Here is a really simple implementation

Ali Al Amine • Apr 28 '20

This is simple and awesome! Many thanks

oybekalimat • Jun 22 '20

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.