https://github.com/samdenty/native-menu
ReactJS context menu component, that doesn't break native browser actions
https://github.com/samdenty/native-menu
Last synced: 11 months ago
JSON representation
ReactJS context menu component, that doesn't break native browser actions
- Host: GitHub
- URL: https://github.com/samdenty/native-menu
- Owner: samdenty
- Created: 2018-03-14T20:44:25.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-12-29T06:17:48.000Z (over 5 years ago)
- Last Synced: 2024-11-26T21:15:11.491Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://codesandbox.io/s/github/samdenty99/native-menu-demo/tree/master/
- Size: 332 KB
- Stars: 13
- Watchers: 2
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
native-menu
A lightweight React context menu component, that doesn't break existing browser functionality.
Demo
|
CodeSandbox
|
NPM
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Props](#props)
## Install
### NPM
```sh
npm i -S native-menu
```
### Yarn
```sh
yarn add native-menu
```
## Usage
### Basic example
[CodeSandbox](https://codesandbox.io/s/8x9yzv0xp0)
``` javascript
import NativeMenu from 'native-menu'
alert('Test 1')
},
{
primary: 'Test 2',
disabled: true
},
]}>
Right click me
```
## Props
### `items?: [{ primary: Component, secondary?: Component, onClick?: Function, disabled?: boolean }]`
Example
```js
{
alert('clicked')
}
]}
>
Click me
```
An array containing custom menu items.
- `primary` - The name of the menu item. React components can be passed
- `secondary` - The secondary text associated with the item (eg. Keyboard shortcut). React components can be passed
- `onClick` - The callback for when the item is clicked
- `disabled` - Grey out and disable the menu item
### `theme?: ('native' | 'native-dark' | 'material' | 'material-dark') `
Example
```js
Click me
```
Specifies the visual theme to use. Defaults to `native`
### `platform?: ('windows' | 'edge' | 'chrome' | 'mac')`
Example
```js
Click me
```
Only applicable with the `native` theme. Chooses the variant of context menu styles to us
### `styles?: JSS`
Example
```js
Click me
```
Overrides 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)
### `hide?: NativeItems[]`
Hides specific native menu items. Native item names
```
'open-link'
'new-window'
'new-incognito-window'
'save-link'
'copy-link'
'copy-text'
'search-text'
'print'
'back'
'forward'
'reload'
'save-as'
'cast'
'translate'
'view-source'
'inspect'
'open-image'
'save-image'
'copy-image'
'copy-image-address'
'search-image'
```
Example
```js
Click me
```
### `mimic?: boolean`
Example
```js
Click me
```
Adds all of the missing context menu items present in Chrome, but without any functionality when clicked.
### `minimal?: boolean`
Example
```js
Click me
```
Hides non-essential menu items such as `print`, `save-as`, `view-source` etc.
### `nativeClick?: Function`
Example
```js
{
e.preventDefault()
alert(`${action} triggered`)
}}
>
Click me
```
Callback for when native menu items are clicked. To prevent the default item action, call `preventDefault()`