Reactで右クリックを禁止にする方法

Reactで右クリックを禁止にする方法

Reactで右クリックを禁止にする方法をTypeScriptで実装する例を紹介します。
今回はライブラリのインストールは不要です。

import React, { useEffect } from 'react';

const App: React.FC = () => {
  useEffect(() => {
    const handleContextMenu = (event: MouseEvent) => {
      event.preventDefault();
      alert("右クリックは禁止されています。");
    };

    document.addEventListener('contextmenu', handleContextMenu);
    
    // クリーンアップ関数を返す
    return () => {
      document.removeEventListener('contextmenu', handleContextMenu);
    };
  }, []);

  return (
    <div>
      <h1>右クリック禁止の例</h1>
      <p>このページでは右クリックは無効化されています。</p>
    </div>
  );
};

export default App;

このコードは、Reactコンポーネントのマウント時にcontextmenuイベントリスナーを追加し、右クリックを無効化します。
また、コンポーネントのアンマウント時にイベントリスナーを削除してクリーンアップします。

説明

• useEffectフックを使用して、コンポーネントがマウントされたときにcontextmenuイベントを監視し、右クリックを無効化します。
• event.preventDefault()を呼び出すことで、右クリックメニューの表示を防ぎます。
• alertを使用してユーザーに通知するメッセージを表示します。

この方法で、Reactアプリケーション内で右クリックを禁止することができます。