File tree Expand file tree Collapse file tree 1 file changed +24
-2
lines changed Expand file tree Collapse file tree 1 file changed +24
-2
lines changed Original file line number Diff line number Diff line change 1
1
# 📝 react-context-menu
2
2
3
+ Minimal context menu components for React.
4
+
3
5
## Installation
4
6
5
7
``` bash
@@ -8,7 +10,7 @@ npm i --save @totase/react-context-menu
8
10
9
11
## Usage
10
12
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 .
12
14
13
15
``` tsx
14
16
import { ContextMenu } from ' @totase/react-context-menu' ;
@@ -17,7 +19,7 @@ import { ContextMenu } from '@totase/react-context-menu';
17
19
18
20
return (
19
21
<>
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 >
21
23
22
24
<ContextMenu triggerId = " context-menu-trigger" >
23
25
<ContextMenu.Item onClick = { () => console .log (" what up" )} >Item 1</ContextMenu.Item >
@@ -27,7 +29,27 @@ return (
27
29
</ContextMenu >
28
30
</>
29
31
)
32
+ ```
33
+
34
+ Alternatively
35
+
36
+ ``` tsx
37
+ import { ContextMenu , MenuItem , Separator } from ' @totase/react-context-menu' ;
38
+
39
+ ...
30
40
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
+ )
31
53
```
32
54
33
55
## License
You can’t perform that action at this time.
0 commit comments