Feature Request - Display the context menu using a React portal
Closed this issue · 3 comments
Nantris commented
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
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
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>