vkbansal / react-contextmenu

Project is no longer maintained
MIT License
1.4k stars 375 forks source link

Feature Request - Display the context menu using a React portal #329

Closed Nantris closed 4 years ago

Nantris commented 4 years ago

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!

vkbansal commented 4 years ago

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).

nogenem commented 4 years ago

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>
vkbansal commented 4 years ago

closing issue see #339