Определить правый клик в React-Примеры кода

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

const RightClickDetector = () => {
  // использовать состояние для отслеживания правых кликов
  const [isRightClick, setIsRightClick] = useState(false);

  // использовать эффект для добавления / удаления прослушивателя событий
  useEffect(() => {
    // добавить прослушиватель событий при монтировании
    document.addEventListener("contextmenu", handleRightClick);
    // удалить прослушиватель событий при размонтировании
    return () => document.removeEventListener("contextmenu", handleRightClick);
  }, []); // пустой массив гарантирует, что эффект запускается только при монтировании и размонтировании

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

  return (
    <div>
      {isRightClick ? (
        <p>Вы нажали правой кнопкой мыши!</p>
      ) : (
        <p>Попробуйте щелкнуть правой кнопкой мыши в любом месте этой страницы.</p>
      )}
    </div>
  );
};

export default RightClickDetector;

import React, { useState } from "react";

const RightClickDetector = () => {
  // использовать состояние для отслеживания правого клика
  const [isRightClick, setIsRightClick] = useState(false);

  const handleContextMenu = (e) => {
    // предотвратить появление контекстного меню браузера по умолчанию
    e.preventDefault();
    // обновить состояние для отражения того, что произошел правый клик
    setIsRightClick(true);
    // сбросить состояние после короткого задержки
    setTimeout(() => setIsRightClick(false), 250);
  };

  return (
    <div onContextMenu={handleContextMenu}>
      {isRightClick ? "Правый клик!" : "Левый клик!"}
    </div>
  );
};

export default RightClickDetector;