Skip to content
This repository has been archived by the owner on Sep 1, 2020. It is now read-only.

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

Closed
Nantris opened this issue May 19, 2020 · 3 comments
Closed

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

Nantris opened this issue May 19, 2020 · 3 comments

Comments

@Nantris
Copy link

Nantris commented May 19, 2020

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
Copy link
Owner

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
Copy link

nogenem commented May 25, 2020

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
Copy link
Owner

closing issue see #339

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants