mantine-contextmenu 7.1.3 → 7.1.4
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 +22 -9
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
[![Language][language-image]][repo-url]
|
|
11
11
|
[![Sponsor the author][sponsor-image]][sponsor-url]
|
|
12
12
|
|
|
13
|
-
The "dark-theme aware" **context-menu** for your Mantine UI applications, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).
|
|
13
|
+
The "dark-theme aware" [**context-menu**](https://icflorescu.github.io/mantine-contextmenu/) for your Mantine UI applications, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).
|
|
14
14
|
|
|
15
15
|
[](https://icflorescu.github.io/mantine-contextmenu/)
|
|
16
16
|
|
|
@@ -20,7 +20,7 @@ The "dark-theme aware" **context-menu** for your Mantine UI applications, built
|
|
|
20
20
|
## Features
|
|
21
21
|
|
|
22
22
|
- **Lightweight** - no external dependencies, [no bloat](https://bundlephobia.com/package/mantine-contextmenu)
|
|
23
|
-
- **Dark-theme aware** - automatically adapts to the current Mantine
|
|
23
|
+
- **Dark-theme aware** - automatically adapts to the current [Mantine color scheme](https://mantine.dev/theming/color-schemes/)
|
|
24
24
|
- **[Simple API](https://icflorescu.github.io/mantine-contextmenu/getting-started)** - just wrap your application in the `ContextMenuProvider` component and use the hook-generated function in your code
|
|
25
25
|
- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content)** - use any Mantine component as context menu content
|
|
26
26
|
- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu/examples/styling)** - use the `className`/`classNames` and `style`/`styles` props to customize the context menu appearance
|
|
@@ -33,19 +33,30 @@ Visit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/ma
|
|
|
33
33
|
## Quickstart
|
|
34
34
|
|
|
35
35
|
Create a new [Mantine application](https://mantine.dev/pages/getting-started/), make sure to have the `clsx` peer dependency installed,
|
|
36
|
-
then install the package with `npm i mantine-contextmenu` or `yarn add mantine-contextmenu
|
|
36
|
+
then install the package with `npm i mantine-contextmenu` or `yarn add mantine-contextmenu`.
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
Import the necessary CSS files:
|
|
39
|
+
|
|
40
|
+
```ts
|
|
41
|
+
import '@mantine/core/styles.layer.css';
|
|
42
|
+
import 'mantine-contextmenu/styles.layer.css';
|
|
43
|
+
import './layout.css';
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Make sure to [apply the styles in the correct order](https://mantine.dev/styles/mantine-styles/):
|
|
47
|
+
|
|
48
|
+
```css
|
|
49
|
+
/* layout.css */
|
|
50
|
+
/* 👇 Apply Mantine core styles first, ContextMenu styles second */
|
|
51
|
+
@layer mantine, mantine-contextmenu;
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Wrap your application in a `ContextMenuProvider` **inside** the `MantineProvider`:
|
|
39
55
|
|
|
40
56
|
```tsx
|
|
41
57
|
import { MantineProvider } from '@mantine/core';
|
|
42
58
|
import { ContextMenuProvider } from 'mantine-contextmenu';
|
|
43
59
|
|
|
44
|
-
// 👇 Mantine core first
|
|
45
|
-
import '@mantine/core/styles.css';
|
|
46
|
-
// 👇 Mantine context menu second
|
|
47
|
-
import 'mantine-contextmenu/styles.css';
|
|
48
|
-
|
|
49
60
|
function App() {
|
|
50
61
|
return (
|
|
51
62
|
<MantineProvider>
|
|
@@ -58,6 +69,8 @@ function App() {
|
|
|
58
69
|
Use the `showContextMenu` function geenrated by the `useContextMenu` in your code:
|
|
59
70
|
|
|
60
71
|
```tsx
|
|
72
|
+
'use client';
|
|
73
|
+
|
|
61
74
|
import { IconCopy, IconDownload } from '@tabler/icons-react';
|
|
62
75
|
import { useContextMenu } from 'mantine-contextmenu';
|
|
63
76
|
import Picture from '~/components/Picture';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mantine-contextmenu",
|
|
3
|
-
"version": "7.1.
|
|
3
|
+
"version": "7.1.4",
|
|
4
4
|
"description": "Enhance your Mantine UI applications usability with customizable context menus",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"build:package": "rm -rf dist; tsc -p package/tsconfig.esm.json; tsc -p package/tsconfig.cjs.json; postcss package/styles*.css --dir dist/css",
|
|
65
65
|
"build:docs": "next build",
|
|
66
66
|
"build": "yarn build:package && yarn build:docs",
|
|
67
|
-
"lint": "eslint .",
|
|
67
|
+
"lint": "eslint . && tsc --noEmit --pretty",
|
|
68
68
|
"format": "prettier --write ."
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
@@ -78,14 +78,14 @@
|
|
|
78
78
|
"@types/node": "^20.8.9",
|
|
79
79
|
"@types/react": "^18.2.33",
|
|
80
80
|
"@types/react-dom": "^18.2.14",
|
|
81
|
-
"@typescript-eslint/eslint-plugin": "^6.9.
|
|
82
|
-
"@typescript-eslint/parser": "^6.9.
|
|
81
|
+
"@typescript-eslint/eslint-plugin": "^6.9.1",
|
|
82
|
+
"@typescript-eslint/parser": "^6.9.1",
|
|
83
83
|
"clsx": "^2.0.0",
|
|
84
84
|
"eslint": "^8.52.0",
|
|
85
|
-
"eslint-config-next": "^14.0.
|
|
85
|
+
"eslint-config-next": "^14.0.1",
|
|
86
86
|
"eslint-config-prettier": "^9.0.0",
|
|
87
87
|
"lodash": "^4.17.21",
|
|
88
|
-
"next": "14.0.
|
|
88
|
+
"next": "14.0.1",
|
|
89
89
|
"postcss": "^8.4.31",
|
|
90
90
|
"postcss-cli": "^10.1.0",
|
|
91
91
|
"postcss-import": "^15.1.0",
|