{"id":4097,"date":"2023-03-21T05:03:52","date_gmt":"2023-03-21T05:03:52","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=4097"},"modified":"2023-06-10T11:31:37","modified_gmt":"2023-06-10T11:31:37","slug":"react-js-rctx-contexmenu","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/react-js-rctx-contexmenu\/","title":{"rendered":"React JS &#8211; RCTX Contexmenu"},"content":{"rendered":"<h4 dir=\"auto\" tabindex=\"-1\"><span style=\"color: #ff0000;\">Note:\u00a0<code>rctx-contextmenu<\/code>\u00a0Supports React 16.8 and above versions because this plugin solely uses React Hooks.<\/span><\/h4>\n<h2 dir=\"auto\" tabindex=\"-1\">The problem<\/h2>\n<p dir=\"auto\">There are lot of times when you want to customize the right click menu or Context Menu. May be you want to add more customized options or even sub options with same look and feel how a native context menu gives.<\/p>\n<h2 dir=\"auto\" tabindex=\"-1\"><a id=\"user-content-the-solution-smile\" class=\"anchor\" href=\"https:\/\/github.com\/reachtokish\/rctx-contextmenu#the-solution-smile\" aria-hidden=\"true\"><\/a>The solution<\/h2>\n<p dir=\"auto\"><code>rctx-contextmenu<\/code>\u00a0gives that flexibility to customize Context Menu. You can add options, sub-options with exactly the look and feel how you get when you use the native Context Menu.<\/p>\n<h2 dir=\"auto\" tabindex=\"-1\"><a id=\"user-content-key-features\" class=\"anchor\" href=\"https:\/\/github.com\/reachtokish\/rctx-contextmenu#key-features\" aria-hidden=\"true\"><\/a>Key features<\/h2>\n<ul dir=\"auto\">\n<li>Append to anywhere you want<\/li>\n<li>Customize styling like however you want<\/li>\n<li>In-built animation<\/li>\n<li>Extensive list of APIs<\/li>\n<li>Dynamically add\/remove menus<\/li>\n<\/ul>\n<h2 dir=\"auto\" tabindex=\"-1\"><a id=\"user-content-browser-support\" class=\"anchor\" href=\"https:\/\/github.com\/reachtokish\/rctx-contextmenu#browser-support\" aria-hidden=\"true\"><\/a>Browser Support<\/h2>\n<ul dir=\"auto\">\n<li>IE 11 and Edge &gt;= 12<\/li>\n<li>FireFox &gt;= 38<\/li>\n<li>Chrome &gt;= 47<\/li>\n<\/ul>\n<h2 dir=\"auto\" tabindex=\"-1\">Installation<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">npm install --save rctx-contextmenu<\/pre>\n<h2 dir=\"auto\" tabindex=\"-1\"><\/h2>\n<h2 dir=\"auto\" tabindex=\"-1\">Sample Usage<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">import React from 'react';\r\nimport { ContextMenuTrigger, ContextMenu, ContextMenuItem } from 'rctx-contextmenu';\r\n\r\nfunction App() {\r\n  return (\r\n    &lt;div className=\"app\"&gt;\r\n      &lt;ContextMenuTrigger\r\n        id=\"my-context-menu-1\"\r\n      &gt;\r\n        &lt;div className=\"box\"&gt;\r\n          Right Click On Me\r\n        &lt;\/div&gt;\r\n      &lt;\/ContextMenuTrigger&gt;\r\n\r\n      &lt;ContextMenu id=\"my-context-menu-1\"&gt;\r\n        &lt;ContextMenuItem&gt;Menu Item 1&lt;\/ContextMenuItem&gt;\r\n        &lt;ContextMenuItem&gt;Menu Item 2&lt;\/ContextMenuItem&gt;\r\n        &lt;ContextMenuItem&gt;Menu Item 3&lt;\/ContextMenuItem&gt;\r\n        &lt;ContextMenuItem&gt;Menu Item 4&lt;\/ContextMenuItem&gt;\r\n      &lt;\/ContextMenu&gt;\r\n    &lt;\/div&gt;\r\n  );\r\n}\r\n\r\nexport default App;<\/pre>\n<h2 dir=\"auto\" tabindex=\"-1\"><\/h2>\n<h2 dir=\"auto\" tabindex=\"-1\">Full example usage<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;ContextMenu\r\n  id=\"my-contextmenu\"\r\n  appendTo=\"body\"\r\n  animation=\"zoom\"\r\n  hideOnLeave={false}\r\n  preventHideOnScroll={true}\r\n  preventHideOnResize={true}\r\n  attributes={{\r\n    'aria-label': 'Some text',\r\n    'aria-labelledby': 'Some text'\r\n  }}\r\n  className=\"my-context-menu\"\r\n  onMouseLeave={() =&gt; console.log('Mouse left')}\r\n  onShow={() =&gt; console.log('I am visible!')}\r\n  onHide={() =&gt; console.log('I am hidden!')}\r\n\/&gt;\r\n\r\n&lt;ContextMenuItem\r\n  disabled={true}\r\n  preventClose={false}\r\n  attributes={{\r\n    'aria-label': 'Some text',\r\n    'aria-labelledby': 'Some text'\r\n  }}\r\n  className=\"my-context-menu-item\"\r\n  onClick={() =&gt; console.log(\"I'm clicked!\")}\r\n\/&gt;\r\n\r\n&lt;ContextMenuTrigger\r\n  id=\"my-contextmenu\"\r\n  disable={false}\r\n  disableWhileShiftPressed={true}\r\n  attributes={{\r\n    'aria-label': 'Some text',\r\n    'aria-labelledby': 'Some text'\r\n  }}\r\n  className=\"my-context-menu-trigger\"\r\n\/&gt;\r\n\r\n&lt;Submenu\r\n  title=\"My submenu\"\r\n  attributes={{\r\n    'aria-label': 'Some text',\r\n    'aria-labelledby': 'Some text'\r\n  }}\r\n  className=\"my-context-menu-submenu\"\r\n\/&gt;<\/pre>\n<div class=\"su-row\">\n<div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\"><div class=\"su-button-center\"><a href=\"https:\/\/github.com\/reachtokish\/rctx-contextmenu\/tree\/master\/example\" class=\"su-button su-button-style-glass su-button-wide\" style=\"color:#FFFFFF;background-color:#CD1110;border-color:#a40e0d;border-radius:50px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 24px;font-size:18px;line-height:27px;border-color:#dc5958;border-radius:50px;text-shadow:1px 1px 1px #000000\"><i class=\"sui sui-github-square\" style=\"font-size:18px;color:#FFFFFF\"><\/i> Github Page<\/span><\/a><\/div><\/div><\/div>\n<div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\"><div class=\"su-button-center\"><a href=\"https:\/\/reachtokish.github.io\/rctx-contextmenu\/\" class=\"su-button su-button-style-glass su-button-wide\" style=\"color:#FFFFFF;background-color:#CD1110;border-color:#a40e0d;border-radius:50px\" target=\"_blank\" rel=\"noopener noreferrer\"><span style=\"color:#FFFFFF;padding:8px 24px;font-size:18px;line-height:27px;border-color:#dc5958;border-radius:50px;text-shadow:1px 1px 1px #000000\"><i class=\"sui sui-github-square\" style=\"font-size:18px;color:#FFFFFF\"><\/i> Demo Page<\/span><\/a><\/div><\/div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Note:\u00a0rctx-contextmenu\u00a0Supports React 16.8 and above versions because this plugin solely uses React <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/react-js-rctx-contexmenu\/\" title=\"React JS &#8211; RCTX Contexmenu\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":4102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"quote","meta":{"footnotes":""},"categories":[20],"tags":[491,492,458,103,237],"newstopic":[],"class_list":{"0":"post-4097","1":"post","2":"type-post","3":"status-publish","4":"format-quote","5":"has-post-thumbnail","7":"category-javascript","8":"tag-javascript","9":"tag-rctx-contexmenu","10":"tag-react-js","11":"tag-web-design","12":"tag-web-development","13":"post_format-post-format-quote"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4097","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=4097"}],"version-history":[{"count":4,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4097\/revisions"}],"predecessor-version":[{"id":4101,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/4097\/revisions\/4101"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/4102"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=4097"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=4097"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=4097"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=4097"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}