https://github.com/pocesar/react-semantic-ui-contextmenu

Thin wrapper for (context) menu using React Semantic-UI
https://github.com/pocesar/react-semantic-ui-contextmenu

contextmenu electron react react-component react-components reactjs right-click semantic-ui semantic-ui-react

Last synced: about 2 months ago
JSON representation

Thin wrapper for (context) menu using React Semantic-UI

• Host: GitHub
• URL: https://github.com/pocesar/react-semantic-ui-contextmenu
• Owner: pocesar
• License: mit
• Created: 2018-09-22T20:44:44.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-22T21:50:55.000Z (over 7 years ago)
• Last Synced: 2025-06-03T02:12:00.056Z (7 months ago)
• Topics: contextmenu, electron, react, react-component, react-components, reactjs, right-click, semantic-ui, semantic-ui-react
• Size: 4.88 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Semantic-UI context menu

Thin wrapper for (context) menu using React Semantic-UI

## Usage

```jsx

import React from 'react'

import { ContextMenu } from 'react-semantic-ui-contextmenu'

import { Dropdown } from 'semantic-ui-react'

class MyContextMenuComponent extends React.Component {

  divRef = React.createRef()

  div2Ref = React.createRef()

  

  menuContent = ({ close, target }) => (

    

      {/* it's actually a Menu.Item with some ready-to-use functionality */}

       { doSomething().then(close) }}> 

        Open in new window

      

      

        Close menu

      

      

      {this.div2Ref.current === target ? (

        

          This only exists in "Also right click me"

        

      ) : null}

      

      {/* behaves exactly like https://react.semantic-ui.com/collections/menu/#content-sub-menu */}

       

        

          

          

          

        

      

    

  )

  /* 

  takes an array of refs, multiple items can trigger the same context menu,

  but can trigger the open/close from outside using isOpen 

  */

  contextTargets = [this.divRef, this.div2Ref]

  

  onOpen = ({ target }) => {

    console.log('context menu opened', target)

  }

  

  onClose = () => {

    console.log('context menu closed')

  }

  

  render() {

    return (

      


        

          {this.menuContent}

        

        
Right click me

        
Also right click me

      

    )

  }

}

```


## Why reusing Menu (and Menu.Item)?

The Semantic-UI Menu component makes it able to create complex, multi level menus without a major effort, making it really easy to create complex menus that are reusable and context-aware

## License 

MIT