vkbansal/react-contextmenu

Feature Request - Display the context menu using a React portal

Closed this issue · 3 comments

I think this library is currently not being developed, but I wanted to put this out there in case it resumes development. The option to display the menu using a portal would be great!

Thanks for your contribution!

Yes I'm unable to find time to work on this, and yes this one of the changes I'm looking to make for next major release (if and when it happens).

I just ran into this problem and i used the following class to help me:

import React from 'react';
import ReactDOM from 'react-dom';

const overlayRoot = document.getElementById('portal-root');

class Portal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }

  componentDidMount() {
    overlayRoot.appendChild(this.el);
  }

  componentWillUnmount() {
    overlayRoot.removeChild(this.el);
  }

  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}

export default Portal;

Then you can use it like this:

<ContextMenuTrigger> ... </ContextMenuTrigger>
<Portal>
    <ContextMenu> ... </ContextMenu>
</Portal>

And, of course, you have to add the following tag in the .html, below the root div:

<div id="portal-root"></div>

closing issue see #339