How to Disable the Right-Click Menu in React

When building React applications, you may want to disable the right-click context menu on some web pages for security or design reasons.

In this article, you will learn in what scenarios it may be useful to disable the right mouse action, and how to do it in React. Follow this tutorial and learn how to disable right-click in React!

When to Disable the Context Menu in React?

The context menu is a menu that appears when the user right-clicks on an empty part of a Web page or on a specific UI element. Typically, the right-click menu lists options relevant to the selected element and its current state.

There are several reasons why you might want to disable the right-click menu on a web page. Let’s now see the three most common reasons.

Make Copying the Content More Difficult

If you want to protect valuable or proprietary information on your website, disabling the right-click can make it more difficult for users to copy the content. While advanced users may still find ways to access the information, it will make it harder for less experienced users to copy it.

Protecting Images or Videos

If your website involves original images or videos and you want to protect them, disabling the right-click can help prevent unauthorized use of those multimedia elements. Advanced users may still be able to download your images, but this will make it more difficult for common users to use them without your permission.

Improving User Experience

Disabling the right-click can enhance the user experience by preventing unintended actions or context menus that might disrupt the design of the page. For instance, some web applications like Discord have their own custom context menus, instead of using the default one.

Disabling Right-Click in React

Disabling the right-click context menu in React takes only a few lines of code. All you have to do is overwrite the contextMenu event handler in the top-level page component as follows:

import React, { useEffect } from 'react';

function PageComponent() {

  useEffect(() => {
    // define a custom handler function
    // for the contextmenu event
    const handleContextMenu = (e) => {
      // prevent the right-click menu from appearing
      e.preventDefault()
    }

    // attach the event listener to 
    // the document object
    document.addEventListener("contextmenu", handleContextMenu)

    // clean up the event listener when 
    // the component unmounts
    return () => {
      document.removeEventListener("contextmenu", handleContextMenu)
    }
  }, [])

  // ...

  return (
      <div>
        {/* The rest of the page component...*/}
      </div>
  );
}

export default PageComponent;

As you can see, the useEffect hook defines a handleContextMenu(). That prevents the default behavior of the onContextMenu event, disabling the right-click context menu. This function is then registered as a global event listener through the addEventListener() method.

Et voilà! You just learned how to disable the right-click in React!

Conclusion

In this article, you learned why you might need to prevent access to the right-click menu and how to do it in React. In detail, you saw that disabling the right-click in React can be easily achieved by overwriting the contextMenu event handler. By preventing the default behavior of the right-click, you can protect your content and improve the user experience.

Thanks for reading! I hope you found this article helpful.