mantine-contextmenu 1.0.0 → 1.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -5
- package/package.json +10 -12
package/README.md
CHANGED
|
@@ -11,11 +11,11 @@
|
|
|
11
11
|
|
|
12
12
|
A "dark-theme aware" **context-menu** for your Mantine UI applications.
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
[](https://icflorescu.github.io/mantine-contextmenu/)
|
|
15
15
|
|
|
16
16
|
## Full documentation and examples
|
|
17
17
|
|
|
18
|
-
Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/mantine-contextmenu/) to view the full documentation and learn how to use it by browsing
|
|
18
|
+
Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/mantine-contextmenu/) to view the full documentation and learn how to use it by browsing the list of usage examples.
|
|
19
19
|
|
|
20
20
|
## Quickstart
|
|
21
21
|
|
|
@@ -42,10 +42,40 @@ function App() {
|
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
-
Use
|
|
45
|
+
Use it in your code:
|
|
46
46
|
|
|
47
|
-
```
|
|
48
|
-
|
|
47
|
+
```tsx
|
|
48
|
+
import { IconCopy, IconDownload } from '@tabler/icons-react';
|
|
49
|
+
import { useContextMenu } from 'mantine-contextmenu';
|
|
50
|
+
import Picture from '~/components/Picture';
|
|
51
|
+
import { copyImageToClipboard, downloadImage, unsplashImages } from '~/lib/image';
|
|
52
|
+
|
|
53
|
+
export default function GettingStartedExample() {
|
|
54
|
+
const showContextMenu = useContextMenu();
|
|
55
|
+
|
|
56
|
+
const image = unsplashImages[0];
|
|
57
|
+
const { src } = image.file;
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
<Picture
|
|
61
|
+
image={image}
|
|
62
|
+
onContextMenu={showContextMenu([
|
|
63
|
+
{
|
|
64
|
+
key: 'copy',
|
|
65
|
+
icon: <IconCopy size={16} />,
|
|
66
|
+
title: 'Copy to clipboard',
|
|
67
|
+
onClick: () => copyImageToClipboard(src),
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
key: 'download',
|
|
71
|
+
icon: <IconDownload size={16} />,
|
|
72
|
+
title: 'Download to your computer',
|
|
73
|
+
onClick: () => downloadImage(src),
|
|
74
|
+
},
|
|
75
|
+
])}
|
|
76
|
+
/>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
49
79
|
```
|
|
50
80
|
|
|
51
81
|
Have a look at the available [type definitions](https://icflorescu.github.io/mantine-contextmenu/type-definitions) and make sure to browse the list of [usage examples](https://icflorescu.github.io/mantine-contextmenu/examples/basic-usage).
|
package/package.json
CHANGED
|
@@ -1,18 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"description": "ContextMenu for Mantine UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
7
7
|
"mantine",
|
|
8
|
-
"
|
|
9
|
-
"datagrid",
|
|
10
|
-
"async",
|
|
11
|
-
"sorting",
|
|
12
|
-
"pagination",
|
|
8
|
+
"context-menu",
|
|
13
9
|
"context menu",
|
|
14
10
|
"react",
|
|
15
|
-
"typescript"
|
|
11
|
+
"typescript",
|
|
12
|
+
"javascript",
|
|
13
|
+
"front-end"
|
|
16
14
|
],
|
|
17
15
|
"repository": "icflorescu/mantine-contextmenu",
|
|
18
16
|
"homepage": "https://icflorescu.github.io/mantine-contextmenu/",
|
|
@@ -40,12 +38,12 @@
|
|
|
40
38
|
"lint": "eslint . --ext=.ts,.tsx && tsc --noEmit"
|
|
41
39
|
},
|
|
42
40
|
"devDependencies": {
|
|
43
|
-
"@mantine/core": "^6.0.
|
|
44
|
-
"@mantine/hooks": "^6.0.
|
|
45
|
-
"@tabler/icons-react": "^2.
|
|
46
|
-
"@types/react": "^18.0.
|
|
41
|
+
"@mantine/core": "^6.0.7",
|
|
42
|
+
"@mantine/hooks": "^6.0.7",
|
|
43
|
+
"@tabler/icons-react": "^2.15.0",
|
|
44
|
+
"@types/react": "^18.0.34",
|
|
47
45
|
"@types/react-dom": "^18.0.11",
|
|
48
|
-
"esbuild": "^0.17.
|
|
46
|
+
"esbuild": "^0.17.16",
|
|
49
47
|
"react": "^18.2.0",
|
|
50
48
|
"typescript": "^5.0.4"
|
|
51
49
|
},
|