{"id":22400939,"url":"https://github.com/samdenty/native-menu","last_synced_at":"2025-07-31T14:33:03.895Z","repository":{"id":55467450,"uuid":"125271332","full_name":"samdenty/native-menu","owner":"samdenty","description":"ReactJS context menu component, that doesn't break native browser actions","archived":false,"fork":false,"pushed_at":"2020-12-29T06:17:48.000Z","size":340,"stargazers_count":13,"open_issues_count":6,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-26T21:15:11.491Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/github/samdenty99/native-menu-demo/tree/master/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/samdenty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-14T20:44:25.000Z","updated_at":"2023-10-13T09:45:34.000Z","dependencies_parsed_at":"2022-08-15T01:00:52.751Z","dependency_job_id":null,"html_url":"https://github.com/samdenty/native-menu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fnative-menu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fnative-menu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fnative-menu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/samdenty%2Fnative-menu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/samdenty","download_url":"https://codeload.github.com/samdenty/native-menu/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228258291,"owners_count":17892657,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-05T08:17:25.753Z","updated_at":"2024-12-05T08:17:26.965Z","avatar_url":"https://github.com/samdenty.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/13242392/37434914-2a7587de-27d9-11e8-9192-d329f50f379a.png\" width=\"500\"\u003e\n  \u003ch2 align=\"center\"\u003enative-menu\u003c/h2\u003e\n  \u003cp align=\"center\"\u003e\n    A lightweight React context menu component, that doesn't break existing browser functionality.\n  \u003c/p\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cb\u003e\n    \u003ca href=\"https://samdenty99.github.io/r?https://oxx9rp415q.codesandbox.io/\"\u003e\n      Demo\n    \u003c/a\u003e\u0026nbsp;|\n    \u003ca href=\"https://samdenty99.github.io/r?https://codesandbox.io/s/github/samdenty99/native-menu-demo/tree/master/\"\u003e\n      CodeSandbox\n    \u003c/a\u003e\u0026nbsp;|\n    \u003ca href=\"https://samdenty99.github.io/r?https://www.npmjs.com/package/native-menu\"\u003e\n      NPM\n    \u003c/a\u003e\n  \u003c/b\u003e\n  \u003cbr\u003e\u003cbr\u003e\n  \u003ca href=\"https://samdenty99.github.io/r?https://samdenty99.github.io/r?https://codesandbox.io/s/github/samdenty99/native-menu-demo/tree/master/\"\u003e\n    \u003cimg src=\"https://codesandbox.io/static/img/play-codesandbox.svg\" height=\"20\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://samdenty99.github.io/r?https://github.com/samdenty99/native-menu/blob/master/package.json\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/package-json/v/samdenty99/native-menu.svg?style=flat\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch2\u003e\u003c/h2\u003e\n\n## Table of Contents\n\n- [Install](#install)\n- [Usage](#usage)\n- [Props](#props)\n\n\n## Install\n\n### NPM\n\n```sh\nnpm i -S native-menu\n```\n\n### Yarn\n\n```sh\nyarn add native-menu\n```\n\n\n## Usage\n\n### Basic example\n\n[CodeSandbox](https://codesandbox.io/s/8x9yzv0xp0)\n\n``` javascript\nimport NativeMenu from 'native-menu'\n\n\u003cNativeMenu items={[\n  {\n    primary: 'Test 1',\n    secondary: 'Ctrl+B',\n    onClick: () =\u003e alert('Test 1')\n  },\n  {\n    primary: 'Test 2',\n    disabled: true\n  },\n]}\u003e\n  \u003cspan\u003e\n    Right click me\n  \u003c/span\u003e\n\u003c/NativeMenu\u003e\n```\n\n## Props\n\n### `items?: [{ primary: Component, secondary?: Component, onClick?: Function, disabled?: boolean }]`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  items={[\n    primary: 'test',\n    onClick: () =\u003e {\n      alert('clicked')\n    }\n  ]}\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nAn array containing custom menu items.\n\n- `primary` - The name of the menu item. React components can be passed\n- `secondary` - The secondary text associated with the item (eg. Keyboard shortcut). React components can be passed\n- `onClick` - The callback for when the item is clicked\n- `disabled` - Grey out and disable the menu item\n\n\n### `theme?: ('native' | 'native-dark' | 'material' | 'material-dark') `\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  theme=\"material-dark\"\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nSpecifies the visual theme to use. Defaults to  `native`\n\n### `platform?: ('windows' | 'edge' | 'chrome' | 'mac')`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  platform=\"mac\"\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nOnly applicable with the `native` theme. Chooses the variant of context menu styles to us\n### `styles?: JSS`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  styles={{\n    root: {\n      backgroundColor: '#000',\n    },\n    primary: {\n      backgroundColor: 'red'\n    }\n  }}\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nOverrides the styles for the context menu using the [JSS](http://cssinjs.org) format. [JSS source code](https://github.com/samdenty99/native-menu/blob/7703f28bc6cb06ab8427a4808e0785374ea5e268/src/styles/chrome.jsx#L9)\n\n### `hide?: NativeItems[]`\n\nHides specific native menu items. \u003cdetails\u003e\u003csummary\u003eNative item names\u003c/summary\u003e\u003cp\u003e\n\n```\n'open-link'\n'new-window'\n'new-incognito-window'\n'save-link'\n'copy-link'\n'copy-text'\n'search-text'\n'print'\n'back'\n'forward'\n'reload'\n'save-as'\n'cast'\n'translate'\n'view-source'\n'inspect'\n'open-image'\n'save-image'\n'copy-image'\n'copy-image-address'\n'search-image'\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  hide={['save-as', 'print']}\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\n### `mimic?: boolean`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  mimic\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nAdds all of the missing context menu items present in Chrome, but without any functionality when clicked.\n\n### `minimal?: boolean`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  minimal\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nHides non-essential menu items such as `print`, `save-as`, `view-source` etc.\n\n### `nativeClick?: Function`\n\n\u003cdetails\u003e\u003csummary\u003eExample\u003c/summary\u003e\u003cp\u003e\n\n```js\n\u003cNativeMenu\n  nativeClick={(e, action) =\u003e {\n    e.preventDefault()\n    alert(`${action} triggered`)\n  }}\n\u003e\n  Click me\n\u003c/NativeMenu\u003e\n```\n\n\u003c/p\u003e\u003c/details\u003e\n\nCallback for when native menu items are clicked. To prevent the default item action, call `preventDefault()`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamdenty%2Fnative-menu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsamdenty%2Fnative-menu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsamdenty%2Fnative-menu/lists"}