rctx-contextmenu
v1.4.1
Published
Contextmenu for react
Downloads
7,920
Maintainers
Readme
Note: rctx-contextmenu
Supports React 16.8 and above versions because this plugin solely uses React Hooks.
rctx-contextmenu
Context menu plugin for React. Live Demo | Example Code
The problem :hushed:
There are lot of times when you want to customize the right click menu or Context Menu. May be you want to add more customized options or even sub options with same look and feel how a native context menu gives.
The solution :smile:
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.
Key features
- Append to anywhere you want
- Customize styling like however you want
- In-built animation
- Extensive list of APIs
- Dynamically add/remove menus
Browser Support
- IE 11 and Edge >= 12
- FireFox >= 38
- Chrome >= 47
Table of contents
Installation
npm install --save rctx-contextmenu
Sample Usage
import React from 'react';
import { ContextMenuTrigger, ContextMenu, ContextMenuItem } from 'rctx-contextmenu';
function App() {
return (
<div className="app">
<ContextMenuTrigger
id="my-context-menu-1"
>
<div className="box">
Right Click On Me
</div>
</ContextMenuTrigger>
<ContextMenu id="my-context-menu-1">
<ContextMenuItem>Menu Item 1</ContextMenuItem>
<ContextMenuItem>Menu Item 2</ContextMenuItem>
<ContextMenuItem>Menu Item 3</ContextMenuItem>
<ContextMenuItem>Menu Item 4</ContextMenuItem>
</ContextMenu>
</div>
);
}
export default App;
Full example usage
<ContextMenu
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!')}
/>
<ContextMenuItem
disabled={true}
preventClose={false}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-item"
onClick={() => console.log("I'm clicked!")}
/>
<ContextMenuTrigger
id="my-contextmenu"
disable={false}
disableWhileShiftPressed={true}
attributes={{
'aria-label': 'Some text',
'aria-labelledby': 'Some text'
}}
className="my-context-menu-trigger"
/>
<Submenu
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
<ContextMenu />
<ContextMenuItem />
<ContextMenuTrigger />
<Submenu />
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
License
MIT License