Reactを使ったWebサイトで右クリックした際にメニューを表示させないようにする 🖱

右クリックした際の挙動は、 onContextMenu を使って制御できます。
なので、 Event.preventDefault を使って、既定のアクションが発生しないようにできます。

developer.mozilla.org
developer.mozilla.org

ソースコード（抜粋）

import { MouseEvent } from 'react';

export default function IndexPage() {
  function handleContextMenu(evt: MouseEvent<HTMLDivElement>) {
    evt.preventDefault();
  }

  return (
    <div onContextMenu={ handleContextMenu }>右クリック禁止</div>
  );
}

TypeScriptを使うとこんな感じです。
MouseEventの部分は、DOMに合わせて適宜変更してください。

DEMO

右クリックしてもメニューが表示されないはずです。
JSFiddleでTypeScriptとJSXを同時に使う方法がわからず、DEMOはJavaScriptで書きました。