\n\nMinimalistic provider built around native [Contextmenu Event](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event).\n\nUnlike many similar libraries, react-right-click-menu simply provides a context environment, where consumer provides an actual DOM node (a reference) to an element that should trigger the menu and the component that should be rendered when the event occurs.\n\nThis makes it easy to intergrate your own UI library and show your own UI Components when a context menu is triggered. That being said, react-right-click-menu doesn't carry over any content or styling, nor it installs any additional dependencies.\n\n## [CodeSandbox Demo](https://codesandbox.io/s/elegant-tharp-2vhjg?file=/src/App.js)\n\n## Install\n\n#### NPM\n\n> npm i @agjs/react-right-click-menu\n\n#### YARN\n\n> yarn add @agjs/react-right-click-menu\n\n## Props\n\n| Props | Description | Default |\n| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| trigger | A react reference to an element that will trigger the menu on right click | null |\n| component | A component to show when trigger is right clicked | null |\n| isOpenAfterInteraction | Determines if a menu should remain open after user interacts with it. For instance, maybe you will render a list of checkboxes that user has to interact with, and you don't want menu to close it after each interaction (click) | true |\n| className | A custom className in case you want to apply custom styling to the context wrapper | null |\n| isOpen | Self-explanatory | false |\n| setIsOpen | Self-explanatory | - |\n\n## Use\n\n```js\nimport React, { useRef, useState } from \"react\";\nimport ContextMenu from \"@agjs/react-right-click-menu\";\nimport SomeUiComponent from \"somewhere\";\n\nexport const ExampleComponent = () => {\n const [isMenuShown, setIsMenuShown] = useState(false);\n const ref = useRef();\n return (\n <>\n }\n isOpen={isMenuShown}\n setIsOpen={setIsMenuShown}\n />\n
\n Once someone right-clicks inside of me, I will trigger some content!\n
\n \n );\n};\n```\n\n## Transitions\n\n#### Example using [react-motion](https://github.com/chenglou/react-motion)\n\nTo keep the minimal footprint, react-right-click-menu doesn't apply any transitions to the component triggered. This decision was made in order to keep minimal amount of external dependencies and to allow a consumer to add them if they wish.\n\nIn the showcase below, we can see how we used a [render-prop](https://reactpatterns.com/#render-prop) from [react-motion](https://github.com/chenglou/react-motion) to generate some inline-styles and pass them down to the ContextMenu.\n\n```js\nimport React, { useRef, useState } from \"react\";\nimport ContextMenu from \"@agjs/react-right-click-menu\";\nimport { Motion, spring } from \"react-motion\";\nimport ContextMenu from \"./index\";\nimport Foo from \"somewhere\";\n\nexport const ExampleComponent = () => {\n const [isMenuShown, setIsMenuShown] = useState(false);\n const ref = useRef();\n return (\n <>\n \n {(interpolatedStyle) => {\n return (\n }\n isOpen={isMenuShown}\n setIsOpen={setIsMenuShown}\n style={{ opacity: interpolatedStyle.opacity }}\n />\n );\n }}\n \n
![](\"./assets/images/react-context-menu.svg\")
\n