You're viewing the outdated v2 docs. For the
documentation of the most recent version, v3, click here.
Check project's GitHub page for more info.
Table of contents:
no-touch-select class to relevant components. Don't abuse this class -
only use it on small elements like buttons or you risk damaging user experience.
Right click (or long press) on the green box below to open a component-local menu. This menu will only
appear when you click inside the box, if you try to click outside it, a different menu will come up (see
next section). The content of the local menu is composed of custom elements with custom styles, none of
which are included in the react-context-menu-wrapper package. This approach makes the process
of designing context menus much more flexible.
Note that, by default, this menu will disappear the moment you click something in it.
Right click (or long press on mobile) anywhere to open a global menu. This menu is styled using the
Bulma CSS framework - you could also use Bootstrap, MaterializeCSS, or any
other framework that provides styling for a dropdown component.
Note that after you flip the switch to disable the global context menu, you'll be able to use your
browser's native context menu.
Right click (or long press on mobile) one of the boxes below. Note that although we only create one
ContextMenuWrapper component, it can behave differently depending on what element we right
click. Thanks to this feature, you can define a single context menu and reuse it in different places.
Right click (or long press on mobile) on any of the nested boxes below. Note that we correctly show the context menu associated with the deepest component. This is a neat feature that is not always guaranteed by context menu packages.
Left click on one of the boxes below. Depending on which box you click, we will show one of the menus from the previous examples, then hide it after 2 seconds. Note that we also disable right click on the boxes - if we wouldn't do this, the global context menu would come up on right click.