Wondering what’s next for npm?Check out our public roadmap! »

    react-contexify
    TypeScript icon, indicating that this package has built-in type declarations

    5.0.0 • Public • Published
    screenshot 2018-10-31 at 13 32 57

    React-contexify CI npm npm license

    contexify

    Documentation

    Go here.

    Installation

    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 } from 'react-contexify';
    import 'react-contexify/dist/ReactContexify.css';
     
    const MENU_ID = 'blahblah';
     
    function App() {
      const { show } = useContextMenu({
        id: MENU_ID,
      });
     
      function handleContextMenu(event){
          event.preventDefault();
          show({
            event,
            props: {
                key: 'value'
            }
          })
      }
      const handleItemClick = ({ event, props }) => console.log(event,props);
     
      return (
        <div>
        <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>
          </Submenu>
        </Menu>
        </div>
      );
    }

    Contribute

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

    License

    React Contexify is licensed under MIT.

    Install

    npm i react-contexify

    DownloadsWeekly Downloads

    11,299

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    250 kB

    Total Files

    57

    Last publish

    Collaborators

    • avatar