Conditional rendering

Hi

I reviewed branch next and decided that I will add features mentioned in PRs #41 and #42 there as it makes more sense. You addressed already disabling on function and passing data to the onClick.

Therefore I have few items left to add:

• visible prop in Item which is either boolean or function where, function has access to passed data (use case: some items exists only for specific data)
• toggleContextMenu as a function, when you need create context without new DOM node (use case: I want div which is draggable and is also context menu provider)

Please proceed with next branch.

Thanks

[ronen]

In case anyone’s interested, I was able to implement conditional rendering with the current API, it came out pretty clean (IMHO). Here’s a sketch:

import { Item, Menu, contextMenu } from 'react-contexify'
import uniqueId from 'lodash/uniqueId'

class MyContextMenu extends PureComponent {

  constructor (props) {
    super(props)
    this.menuId = uniqueId('MyContextMenu')
    this.state = {}
  }

  open (event) {
    event.preventDefault()
    const a = ... // compute value based on event and this.props
    const b = ... // compute value based on event and this.props
    this.setState({ a, b })
    contextMenu.show({ id: this.menuId, event })
  }

  render () {
    const { a, b } = this.state
    return <Menu className='my-menu' id={this.menuId} >
       { a && <Item ...>This is item A</Item> }
       { b && <Item ...>This is item B</Item> }
    </Menu>
  }

  // ...click handlers here...
}

I’m using react-redux, so I wrap that in a connect(mapStateToProps) for the menu to depend on the app state, and for the click handlers to be able to dispatch()

Invoke the context menu with a ref:

class Caller extends Component {
   constructor (props) {
     super(props)
     this.menuRef = React.createRef()
  }

  render () {
    return <div className='Caller'>
      <div onContextMenu={event => this.menuRef.current.open(event)}>
        ...context menu available here..
      </div>
      <MyContextMenu ref={this.menuRef} otherProps.../>
   </div>
  }

}

This has the nice side-effect (IMHO) that the caller is completely insulated from the react-contextify API.

[fkhadra]

Hello @ronen,

Your implementation is 👌. I’ll close the issue.