DEV Community


Posted on • Updated on

Implementing context menu using react hooks

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 => {
      if (outerRef && outerRef.current.contains( {
      } else {
    [showMenu, outerRef, setXPos, setYPos]

  const handleClick = useCallback(() => {
  }, [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 }}>
  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.

Top comments (7)

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.

rafi993 profile image

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 profile image

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

Thread Thread
rafi993 profile image
Rafi • Edited

Here is a really simple implementation

Thread Thread
alialamine profile image
Ali Al Amine

This is simple and awesome! Many thanks

oybekalimat profile image

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.

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?