0

I have made a Custom context menu in react.js and I want to disable all the events like scroll and all if that context menu is open just like default Google chrome's context menu. All the events should get enabled if the user has clicked once and the context menu is not visible or he chooses some option from the context menu just like in chrome. Can anyone help me in achieving this functionality?

Akash Sharma
  • 129
  • 9

1 Answers1

0

Two directions,

A) disable each event you don't want to have, Ex. How to disable scrolling temporarily?

B) add a layer on top of the screen, and then put your widget on top of that, this is normally referred as Modal. Ex. https://github.com/reactjs/react-modal

I'll vote for B), seems this is a classical problem you are running into.

windmaomao
  • 7,120
  • 2
  • 32
  • 36
  • Thank for your reply. How can I make the modal appear at a specific position on the screen where the user does the right click. By default Modal appears at the center of the screen. – Akash Sharma Jun 28 '20 at 08:18
  • Modal normally have a `className`, where you can specify the `CSS`, ex. `top`, `left`. And some third party library let you specify the location by `left` or `center` etc. – windmaomao Jun 28 '20 at 14:54