https://github.com/fkhadra/react-contexify
👌 Add a context menu to your react app with ease
https://github.com/fkhadra/react-contexify
context-menu dropdown menu popup react react-component
Last synced: 11 days ago
JSON representation
👌 Add a context menu to your react app with ease
- Host: GitHub
- URL: https://github.com/fkhadra/react-contexify
- Owner: fkhadra
- License: mit
- Created: 2016-06-20T06:32:23.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-11-25T01:12:32.000Z (6 months ago)
- Last Synced: 2025-05-09T20:53:56.775Z (15 days ago)
- Topics: context-menu, dropdown, menu, popup, react, react-component
- Language: TypeScript
- Homepage: https://fkhadra.github.io/react-contexify/
- Size: 8.34 MB
- Stars: 1,204
- Watchers: 8
- Forks: 124
- Open Issues: 48
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - fkhadra/react-contexify - 👌 Add a context menu to your react app with ease (TypeScript)
README
 []() []() []()
## Features
- Easy to set up for real, you can make it work in less than 10sec!
- Super easy to customize thanks to css variables 💅
- Custom position
- Sub menu support
- Does not go offscreen
- Dark mode 🌒
- Keyboard navigation + keyboard shortcut!
- Built-in animations
- Easy to test!
- Written in Typescript 💪
- Tiny! (3k gzipped)
Check the documentation for more!
## Documentation
Go [here](https://fkhadra.github.io/react-contexify).
## Installation
Using yarn
```sh
$ yarn add react-contexify
```
Using npm
```sh
$ npm install --save react-contexify
```
## The gist
```js
import { Menu, Item, Separator, Submenu, useContextMenu } from 'react-contexify';
import 'react-contexify/ReactContexify.css';
const MENU_ID = 'blahblah';
function App() {
const { show } = useContextMenu({
id: MENU_ID,
});
function handleContextMenu(event){
show({
event,
props: {
key: 'value'
}
})
}
// I'm using a single event handler for all items
// but you don't have too :)
const handleItemClick = ({ id, event, props }) => {
switch (id) {
case "copy":
console.log(event, props)
break;
case "cut";
console.log(event, props);
break;
//etc...
}
}
return (
lorem ipsum blabladhasi blaghs blah
Copy
Cut
Disabled
Reload
Do something else
);
}
```
## Contribute
Any idea and suggestions are welcome. Please have a look at the contributing guide.
## License
React Contexify is licensed under MIT.