title: react: disable right click on videojs
body: <p>The following is my code:
  I need to add a quality selector and disable the right-click option in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in react. Please help</p>
  <p><strong>VideoPlayer.js</strong></p>
  <pre><code>import videojs from &quot;video.js&quot;;
  
  export const VideoPlayer = (props) =&gt; {
    const videoPlayerRef = useRef(null); // Instead of ID
    const [currentTime, setCurrentTime] = useState(null);
    const videoSrc = &quot;https://media.w3.org/2010/05/sintel/trailer_hd.mp4&quot;;
  
    const videoJSOptions = {
      autoplay: &quot;muted&quot;,
      controls: true,
      userActions: { hotkeys: true },
      playbackRates: [0.5, 1, 1.5, 2],
      chromecast: {
        appId: &quot;APP-ID&quot;,
        metadata: {
          title: &quot;Title display on tech wrapper&quot;,
          subtitle: &quot;Synopsis display on tech wrapper&quot;,
        },
      },
      hlsQualitySelector: {
        displayCurrentQuality: true,
      },
    };
  
    useEffect(() =&gt; {
      if (videoPlayerRef) {
        const player = videojs(videoPlayerRef.current, videoJSOptions, () =&gt; {
          player.src(videoSrc);
          player.on(&quot;ended&quot;, () =&gt; {
            console.log(&quot;ended&quot;);
          });
          player.on(&quot;timeupdate&quot;, () =&gt; {
            setCurrentTime(player.currentTime());
          });
          console.log(&quot;Player Ready&quot;);
        });
      }
  
      return () =&gt; {};
    }, []);
  
    return (
      &lt;div style={{ width: &quot;100%&quot; }}&gt;
        &lt;video
          style={{ width: &quot;100%&quot; }}
          ref={videoPlayerRef}
          className=&quot;video-js&quot;
        /&gt;
        &lt;span&gt;Current Time: {currentTime}&lt;/span&gt;
        {/* &lt;GlobalStyle /&gt; */}
      &lt;/div&gt;
    );
  };```
  </code></pre>