React-popper: Investigate new portals in React 16

[souporserious]

It would be cool if we could make this really easy and have a prop that passes down the id of a container or something similar to render <Popper/> components into.

[FezVrasta]

I wouldn't add too much functionalities here honestly. I like specialized components

[fernandopasik]

Would it be possible to first update to react 16 before going into this?

[FezVrasta]

For React 16 I did prepare a small test PR while it was still in beta.

https://github.com/souporserious/react-popper/pull/43

[TheSharpieOne]

Just FYI, reactstrap uses react-popper and did something similar (wasn't that hard), though I wouldn't use the new portals exclusively or you will break backwards compatibility which is :cry:. Maybe another library/component which depends on react-popper can be created which just adds this feature (like react-popper-portal).

[jamiewinder]

I'm already using react-popper with React 16's portals:

With a simple 'Portal' component:

class Portal extends React.Component {
    render() {
        const { children, target = document.body } = this.props;
        return ReactDOM.createPortal(children, target);
    }
}

You can simply do:

<Manager tag={false}>
    <Target>
        <div>This target...</div>
    </Target>
    <Popper>
        <Portal>
            <div>... has this popper</div>
        </Portal>
    </Popper>
</Manager>

[souporserious]

After thinking about it, I agree it shouldn't go in here since it's so trivial and would break backwards compatibility 💩