Skip to content

Commit 209bbf4

Browse files
committed
📝 Update readme
1 parent 592dfe2 commit 209bbf4

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# 📝 react-context-menu
22

3+
Minimal context menu components for React.
4+
35
## Installation
46

57
```bash
@@ -8,7 +10,7 @@ npm i --save @totase/react-context-menu
810

911
## Usage
1012

11-
All components are exported from the main component, `ContextMenu`, so that's the only one needed to import.
13+
Import the `ContextMenu` component and structure your menu with items and separators.
1214

1315
```tsx
1416
import { ContextMenu } from '@totase/react-context-menu';
@@ -17,7 +19,7 @@ import { ContextMenu } from '@totase/react-context-menu';
1719

1820
return (
1921
<>
20-
<div id="context-menu-trigger">I will trigger the menu when right clicked<div>
22+
<div id="context-menu-trigger">I will trigger the menu when right clicked</div>
2123

2224
<ContextMenu triggerId="context-menu-trigger">
2325
<ContextMenu.Item onClick={() => console.log("what up")}>Item 1</ContextMenu.Item>
@@ -27,7 +29,27 @@ return (
2729
</ContextMenu>
2830
</>
2931
)
32+
```
33+
34+
Alternatively
35+
36+
```tsx
37+
import { ContextMenu, MenuItem, Separator } from '@totase/react-context-menu';
38+
39+
...
3040

41+
return (
42+
<>
43+
<div id="context-menu-trigger">I will trigger the menu when right clicked</div>
44+
45+
<ContextMenu triggerId="context-menu-trigger">
46+
<MenuItem onClick={() => console.log("what up")}>Item 1</MenuItem>
47+
<MenuItem disabled>Disabled item</MenuItem>
48+
<Separator />
49+
<MenuItem onClick={() => console.log("what up")}>Item 3</MenuItem>
50+
</ContextMenu>
51+
</>
52+
)
3153
```
3254

3355
## License

0 commit comments

Comments
 (0)