├── .npmignore
├── .gitignore
├── webpack.config.js
├── package.json
├── src
├── DefaultItems.jsx
├── styles
│ ├── material.jsx
│ └── native.jsx
└── index.jsx
├── README.md
└── yarn.lock
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path')
2 | module.exports = {
3 | entry: './src/index.jsx',
4 | output: {
5 | path: path.resolve(__dirname, 'build'),
6 | filename: 'index.js',
7 | libraryTarget: 'commonjs2'
8 | },
9 | module: {
10 | rules: [
11 | {
12 | test: /\.jsx?$/,
13 | exclude: /node_modules/,
14 | use: {
15 | loader: 'babel-loader',
16 | }
17 | }
18 | ]
19 | },
20 | resolve: {
21 | extensions: ['.js', '.jsx']
22 | },
23 | externals: {
24 | react: 'commonjs react'
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "native-menu",
3 | "version": "1.4.1",
4 | "description": "ReactJS context menu component, that doesn't break native browser actions",
5 | "keywords": [
6 | "React",
7 | "context menu",
8 | "browser",
9 | "chrome"
10 | ],
11 | "main": "build/index.js",
12 | "dependencies": {
13 | "copy-to-clipboard": "3.0.8",
14 | "file-saver": "1.3.3",
15 | "jss": "9.8.0",
16 | "jss-preset-default": "4.3.0",
17 | "react": "16.2.0",
18 | "react-contextmenu": "2.9.2",
19 | "react-dom": "16.2.1",
20 | "webpack": "^4.1.1"
21 | },
22 | "devDependencies": {
23 | "babel-cli": "^6.26.0",
24 | "babel-core": "^6.26.0",
25 | "babel-loader": "^7.1.4",
26 | "babel-preset-es2015": "^6.24.1",
27 | "babel-preset-react": "^6.24.1",
28 | "babel-preset-stage-2": "^6.24.1",
29 | "webpack-cli": "^2.0.12"
30 | },
31 | "babel": {
32 | "presets": [
33 | [
34 | "es2015",
35 | {
36 | "modules": false
37 | }
38 | ],
39 | "react",
40 | "stage-2"
41 | ]
42 | },
43 | "scripts": {
44 | "test": "echo \"Error: no test specified\" && exit 1",
45 | "start": "webpack --watch",
46 | "build": "webpack --progress"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/DefaultItems.jsx:
--------------------------------------------------------------------------------
1 | export default (item, selection) => {
2 | switch (item) {
3 | case 'open-link': {
4 | return ['Open link in new tab']
5 | }
6 | case 'new-window': {
7 | return ['Open link in new window']
8 | }
9 | case 'new-incognito-window': {
10 | return ['Open link in new incognito window']
11 | }
12 | case 'save-link': {
13 | return ['Save link as']
14 | }
15 | case 'copy-link': {
16 | return ['Copy link address']
17 | }
18 | case 'copy-text': {
19 | return ['Copy', 'Ctrl+C']
20 | }
21 | case 'search-text': {
22 | const query =
23 | selection.length > 40 ? selection.substr(0, 40) + '...' : selection
24 | return [`Search Google for "${query}"`]
25 | }
26 | case 'print': {
27 | return ['Print', 'Ctrl+P']
28 | }
29 | case 'back': {
30 | return ['Back', 'Alt+Left Arrow', !!document.referrer]
31 | }
32 | case 'forward': {
33 | return ['Forward', 'Alt+Right Arrow']
34 | }
35 | case 'reload': {
36 | return ['Reload', 'Ctrl+R']
37 | }
38 | case 'save-as': {
39 | return ['Save as...', 'Ctrl+S']
40 | }
41 | case 'cast': {
42 | return ['Cast']
43 | }
44 | case 'translate': {
45 | return ['Translate to English']
46 | }
47 | case 'view-source': {
48 | return ['View page source', 'Ctrl+U']
49 | }
50 | case 'inspect': {
51 | return ['Inspect', 'Ctrl+Shift+I']
52 | }
53 | case 'open-image': {
54 | return ['Open image in new tab']
55 | }
56 | case 'save-image': {
57 | return ['Save image as...']
58 | }
59 | case 'copy-image': {
60 | return ['Copy image']
61 | }
62 | case 'copy-image-address': {
63 | return ['Copy image address']
64 | }
65 | case 'search-image': {
66 | return ['Search Google for image']
67 | }
68 | default: {
69 | return ['undefined']
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/styles/material.jsx:
--------------------------------------------------------------------------------
1 | import jss from 'jss'
2 | import preset from 'jss-preset-default'
3 |
4 | jss.setup(preset())
5 |
6 | export default config => {
7 | const fontColor = config.variant === 'dark' ? 'rgba(255,255,255,0.9)' : '#000'
8 | const styles = {
9 | root: {
10 | boxSizing: 'border-box',
11 | cursor: 'default',
12 | minWidth: '270px',
13 | maxWidth: '100%',
14 | backgroundColor: config.variant === 'dark' ? '#505050' : '#ffffff',
15 | borderRadius: '3px',
16 | padding: '4px 0',
17 | boxShadow: '0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22)',
18 | outline: 'none',
19 | userSelect: 'none',
20 | overflow: 'hidden',
21 | zIndex: 999999999,
22 | transition: 'opacity 0.15s ease',
23 | ...config.styles.root,
24 | '& *': {
25 | boxSizing: 'border-box'
26 | },
27 | '& .react-contextmenu-item:not(.react-contextmenu-item--divider)': {
28 | display: 'flex',
29 | outline: '0',
30 | height: '28px',
31 | lineHeight: '28px',
32 | padding: '0 25px',
33 | color: fontColor,
34 | fontFamily: `'Segoe UI'`,
35 | fontSize: '12px',
36 | transition: 'background-color 0.03s ease',
37 | ...config.styles.item,
38 | '&:hover': {
39 | backgroundColor:
40 | config.variant === 'dark'
41 | ? 'rgba(255, 255, 255, 0.1)'
42 | : 'rgba(0, 0, 0, 0.07)',
43 | '& *': {
44 | color: fontColor
45 | }
46 | }
47 | },
48 | '& .react-contextmenu-item--disabled': {
49 | color: '#a2a2a2 !important',
50 | pointerEvents: 'none !important',
51 | ...config.styles.disabled
52 | },
53 | '& .react-contextmenu-item--divider': {
54 | pointerEvents: 'none',
55 | height: '1px',
56 | background:
57 | config.variant === 'dark' ? 'rgba(255,255,255,0.1)' : '#e9e9e9',
58 | margin: '5px 1px',
59 | ...config.styles.divider
60 | }
61 | },
62 | primary: {
63 | flexGrow: 1,
64 | padding: '0 10px',
65 | ...config.styles.primary
66 | },
67 | secondary: {
68 | color: '#a2a2a2',
69 | ...config.styles.secondary
70 | }
71 | }
72 |
73 | return jss.createStyleSheet(styles).attach().classes
74 | }
75 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
native-menu
4 |
5 | A lightweight React context menu component, that doesn't break existing browser functionality.
6 |
7 |
8 |
9 |
10 |
11 | Demo
12 | |
13 |
14 | CodeSandbox
15 | |
16 |
17 | NPM
18 |
19 |
20 |
21 |
22 | 
23 |
24 |
25 | 
26 |
27 |
28 |
29 |
30 | ## Table of Contents
31 |
32 | - [Install](#install)
33 | - [Usage](#usage)
34 | - [Props](#props)
35 |
36 |
37 | ## Install
38 |
39 | ### NPM
40 |
41 | ```sh
42 | npm i -S native-menu
43 | ```
44 |
45 | ### Yarn
46 |
47 | ```sh
48 | yarn add native-menu
49 | ```
50 |
51 |
52 | ## Usage
53 |
54 | ### Basic example
55 |
56 | [CodeSandbox](https://codesandbox.io/s/8x9yzv0xp0)
57 |
58 | ``` javascript
59 | import NativeMenu from 'native-menu'
60 |
61 | alert('Test 1')
66 | },
67 | {
68 | primary: 'Test 2',
69 | disabled: true
70 | },
71 | ]}>
72 |
73 | Right click me
74 |
75 |
76 | ```
77 |
78 | ## Props
79 |
80 | ### `items?: [{ primary: Component, secondary?: Component, onClick?: Function, disabled?: boolean }]`
81 |
82 | Example
83 |
84 | ```js
85 | {
89 | alert('clicked')
90 | }
91 | ]}
92 | >
93 | Click me
94 |
95 | ```
96 |
97 |
Example
110 |
111 | ```js
112 |
115 | Click me
116 |
117 | ```
118 |
119 |
Example
126 |
127 | ```js
128 |
131 | Click me
132 |
133 | ```
134 |
135 |
Example
141 |
142 | ```js
143 |
153 | Click me
154 |
155 | ```
156 |
157 |
Native item names
164 |
165 | ```
166 | 'open-link'
167 | 'new-window'
168 | 'new-incognito-window'
169 | 'save-link'
170 | 'copy-link'
171 | 'copy-text'
172 | 'search-text'
173 | 'print'
174 | 'back'
175 | 'forward'
176 | 'reload'
177 | 'save-as'
178 | 'cast'
179 | 'translate'
180 | 'view-source'
181 | 'inspect'
182 | 'open-image'
183 | 'save-image'
184 | 'copy-image'
185 | 'copy-image-address'
186 | 'search-image'
187 | ```
188 |
189 |
Example
192 |
193 | ```js
194 |
197 | Click me
198 |
199 | ```
200 |
201 |
Example
206 |
207 | ```js
208 |
211 | Click me
212 |
213 | ```
214 |
215 |
Example
222 |
223 | ```js
224 |
227 | Click me
228 |
229 | ```
230 |
231 |
Example
238 |
239 | ```js
240 | {
242 | e.preventDefault()
243 | alert(`${action} triggered`)
244 | }}
245 | >
246 | Click me
247 |
248 | ```
249 |
250 |