disabling right click on images in pwa-CodePudding

I am developing a pwa react app. when i long press click on an image it behaves like right click happens. i want to disable this behavior only in standalone mode. i know i can use

window.addEventListener('contextMenu',(e)=>e.preventDefault())

but this listener applies on the entire window. using ref may not be a good approach because i want user to be able to do right click in the desktop mode.

CodePudding user response：

You can just set oncontextmenu="return false;" on any element you want.

Check this link: https://codinhood.com/nano/dom/disable-context-menu-right-click-javascript

CodePudding user response：

Try this

You can write a custom hook to get the window size

import { useState, useEffect } from "react";

const useWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: undefined,
    height: undefined
  });

  useEffect(() => {
    if (typeof window !== "undefined") {
      function handleResize() {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight
        });
      }

      window.addEventListener("resize", handleResize);

      handleResize();

      return () => window.removeEventListener("resize", handleResize);
    }
  }, []);
  return windowSize;
};

export default useWindowSize;

Then, write another custom hook depending on window size(width), you can register the event listener to avoid the context menu

import { useState, useEffect } from "react";
import useWindowSize from "./useWindowSize";

function avoidContextMenu(e) {
  e.preventDefault();
}

const useAvoidContextMenu = (ref) => {
  const windowSize = useWindowSize();
  const [listenerStatus, setListenerStatus] = useState(false);

  useEffect(() => {
    if (!listenerStatus && windowSize.width < 600) {
      setListenerStatus(true);
      ref.current.addEventListener("contextmenu", avoidContextMenu);
    } else if (listenerStatus && windowSize.width >= 600) {
      setListenerStatus(false);
      ref.current.removeEventListener("contextmenu", avoidContextMenu);
    }
  }, [windowSize.width]);

  useEffect(() => {
    return ref.current.removeEventListener("contextmenu", avoidContextMenu);
  }, []);
};

export default useAvoidContextMenu;

In your component call useAvoidContextMenu by giving a ref for that component. This way it is configurable and reusable.

import { createRef } from "react";
import useAvoidContextMenu from "./useAvoidContextMenu";

export default function App() {
  const myRef = createRef();
  useAvoidContextMenu(myRef);

  return (
    <div style={{ backgroundColor: "lightblue" }}>
      <div className="App" ref={myRef}>
        <h1>Right click on me and check in different window widths</h1>
        <h3>(less than 600px and greater than 600px)</h3>
      </div>
    </div>
  );
}

Code Sandbox => https://codesandbox.io/s/inspiring-hellman-fomfw?file=/src/App.js