Contextmenu for react
npm install rctx-contextmenu
rctx-contextmenu gives that flexibility to customize Context Menu. You can add options, sub-options with exactly the look and feel how you get when you use the native Context Menu.
npm install --save rctx-contextmenu
`Sample Usage
`jsx
import React from 'react';
import { ContextMenuTrigger, ContextMenu, ContextMenuItem } from 'rctx-contextmenu';function App() {
return (
id="my-context-menu-1"
>
Right Click On Me
Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4
);
}export default App;
`
Full example usage
`jsx
id="my-contextmenu"
appendTo="body"
animation="zoom"
hideOnLeave={false}
preventHideOnScroll={true}
preventHideOnResize={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu"
onMouseLeave={() => console.log('Mouse left')}
onShow={() => console.log('I am visible!')}
onHide={() => console.log('I am hidden!')}
/>
``jsx
disabled={true}
preventClose={false}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-item"
onClick={() => console.log("I'm clicked!")}
/>
``jsx
id="my-contextmenu"
disable={false}
disableWhileShiftPressed={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-trigger"
/>
``jsx
title="My submenu"
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-submenu"
/>
`Live Demo
Live demo is available here.Example Code
Example code is available here.APIs
####
Name
Type
Options
Description
id
String
Should be a string.
ContextMenu and ContextMenuTrigger id should match.
appendTo
String
Should be a string which contains element selector like body / #id / .class . Default: Enclosed element
Append context menu inside required element.
animation
String
Enums: fade | zoom | pop | toTopLeft | rightToLeft
Make the contextmenu visible in animated way.
hideOnLeave
Boolean
true / false. Default: false
Hide contextmenu on blur or mouseOut.
attributes
Object
-
Add additional attributes to the element.
className
String
-
Additional classes.
preventHideOnResize
Boolean
true / false. Default: false
Prevent hiding contextmenu from hiding on window resize.
preventHideOnScroll
Boolean
true / false. Default: false
Prevent hiding contextmenu from hiding on scroll.
onShow
Function
() => {}
Trigger this event when Context Menu is visible.
onHide
Function
() => {}
Trigger this event when Context Menu is hidden.
onMouseLeave
Function
() => {}
Invoke onMouseLeave on blur or mouseOut.
####
Name
Type
Options
Description
disabled
Boolean
true / False . Default False
Disable menu item.
preventClose
Boolean
true / False . Default False
Context menu is closed as soon as an item is clicked.
disableWhileShiftPressed
Boolean
true / false. Default: false
Open browser default contextmenu if shift pressed while right click on trigger element.
attributes
Object
-
Add additional attributes to the element.
className
String
-
Additional classes.
onClick
Function
() => {}
Fire onClick event.
####
Name
Type
Options
Description
id
String
Should be a string.
ContextMenu and ContextMenuTrigger id should match.
attributes
Object
-
Add additional attributes to the element.
disable
true / false. Default: false
false
Disable contextmenu and open browser default contextmenu.
className
String
-
Additional classes.
####
Name
Type
Options
Description
title
String
Should be a string.
Title for the Submenu.
attributes
Object
-
Add additional attributes to the element.
className
String
-
Additional classes.
Styling
Styling is totally up to you. You can use CSS or even SCSS to customize the styling part. Below are the classes you can consider for styling- menu-trigger (Right click area wrapper)
- contextmenu (The Context Menu)
- contextmenu__item (Each Context Menu item)
- contextmenu__item--disabled (Context Menu item)
- submenu (Context Submenu)
- submenu__item (Context Submenu item)
Contributions :pray:
Any kind of contribution would be much appreciated. It could be small change in the doc or even any kind of advice. You can create issues if you feel any feature which is missing which solves bigger problems.Develop locally
First clone the repo
`
git clone https://github.com/reachtokish/rctx-contextmenu.git
`
Navigate inside rctx-contextmenu folder
`
cd rctx-contextmenu
`
Install dependencies
`
npm install
`
Then start server to run it locally
`
npm start
`
Now app should run on localhost:1234`Design inspiration Khalid Hasan Zibon / Dribble