ReactJS context menu component - A maintenance of native-menu
npm install context-menu-react
A lightweight React context menu component, that doesn't break existing browser functionality.
This is a maintenance of native-menu
Reference: https://github.com/samdenty99/native-menu
``sh`
npm i -S context-menu-react
`sh`
yarn add context-menu-react
` javascript
import NativeMenu from 'context-menu-react'
primary: 'Test 1',
secondary: 'Ctrl+B',
onClick: () => alert('Test 1')
},
{
primary: 'Test 2',
disabled: true
},
]}>
Right click me
`
`Example
js`
primary: 'test',
onClick: () => {
alert('clicked')
}
]}
>
Click me
An array containing custom menu items.
- primary - The name of the menu item. React components can be passedsecondary
- - The secondary text associated with the item (eg. Keyboard shortcut). React components can be passedonClick
- - The callback for when the item is clickeddisabled
- - Grey out and disable the menu itemshowSelection
- - Show selected text in context menu item
`Example
js`
>
Click me
Specifies the visual theme to use. Defaults to native
`Example
js`
>
Click me
Only applicable with the native theme. Chooses the variant of context menu styles to us$3
`Example
js`
root: {
backgroundColor: '#000',
},
primary: {
backgroundColor: 'red'
}
}}
>
Click me
Overrides the styles for the context menu using the JSS format. JSS source code
Shows 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
`Example
js`
>
Click me
Adds all of the missing context menu items present in Chrome, but without any functionality when clicked.
`Example
js`
>
Click me
Hides non-essential menu items such as print, save-as, view-source etc.
`Example
js${action} triggered
e.preventDefault()
alert()`
}}
>
Click me
Callback for when native menu items are clicked. To prevent the default item action, call preventDefault()`