Detect right click in React-Code Examples

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

const RightClickDetector = () => {
  // useState to track right clicks
  const [isRightClick, setIsRightClick] = useState(false);

  // useEffect to add/remove event listener
  useEffect(() => {
    // add event listener on mount
    document.addEventListener("contextmenu", handleRightClick);
    // remove event listener on unmount
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // empty array ensures that effect is only run on mount and unmount

  const handleRightClick = (e) => {
    e.preventDefault();
    setIsRightClick(true);
  };

  return (
    <div>
      {isRightClick ? (
        <p>You right clicked!</p>
      ) : (
        <p>Try right clicking anywhere on this page.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

import React, { useState } from "react";

const RightClickDetector = () => {
  // useState to track whether right-click has been detected
  const [isRightClick, setIsRightClick] = useState(false);

  const handleContextMenu = (e) => {
    // prevent default browser context menu from appearing
    e.preventDefault();
    // update state to reflect that a right-click has occurred
    setIsRightClick(true);
    // reset state after a short delay
    setTimeout(() => setIsRightClick(false), 250);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      {isRightClick ? "Right Click!" : "Left Click!"}
    </div>
  );
};

export default RightClickDetector;