Awesome Open Source
Awesome Open Source
screenshot 2018-10-31 at 13 32 57

React-contexify CI npm npm license



Go here.


Using yarn

$ yarn add react-contexify

Using npm

$ npm install --save react-contexify

The gist

import React from 'react';
import { Menu, Item, Separator, Submenu, MenuProvider, useContextMenu } from 'react-contexify';
import 'react-contexify/dist/ReactContexify.css';

const MENU_ID = 'blahblah';

function App() {
  const { show } = useContextMenu({
    id: MENU_ID,

  function handleContextMenu(event){
      show(event, {
        props: {
            key: 'value'
  const handleItemClick = ({ event, props }) => console.log(event,props);

  return (
    <p onContextMenu={handleContextMenu}>lorem ipsum blabladhasi blaghs blah</p>  
    <Menu id={MENU_ID}>
      <Item onClick={handleItemClick}>Item 1</Item>
      <Item onClick={handleItemClick}>Item 2</Item>
      <Separator />
      <Item disabled>Disabled</Item>
      <Separator />
      <Submenu label="Foobar">
        <Item onClick={handleItemClick}>Sub Item 1</Item>
        <Item onClick={handleItemClick}>Sub Item 2</Item>


Any idea and suggestions are welcome. Please have a look at the contributing guide.


React Contexify is licensed under MIT.

Alternatives To React Contexify
Select To Compare

Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Typescript (240,386
Reactjs (161,116
Menu (13,218
React Components (6,228
Context Menu (947