4 ms·

Ah this is cool, like ember-wormhole in the ember world! How were React devs doing modals, etc before?

• greg5green 9y ago
  It was pretty common to use https://github.com/tajo/react-portal https://github.com/tajo/react-portal for modals before React 16. It provided most (or all, I haven't really compared yet) of the functionality React 16 provides now so they've re-written it to just be a nice wrapper around the `createPortal` API.
• kccqzy 9y ago
  Just use ReactDOM.render into a separate, top-level <div> that is usually empty. And then have the close button of the modal call ReactDOM.unmountComponentAtNode. Alternatively, don't bother with all of this and just mount the modal into your children. Use CSS `position: absolute/fixed` to position it. Of course this assumes your ancestor elements don't have certain properties like `position: relative` or `transform` set, but this is usually not a problem.
  • teniutza 9y ago
    A pop-up can be dragged onto a second monitor, for example, whereas a modal cannot.
    • kccqzy 9y ago
      OP was asking about how to do modals, not comparing a modal vs a pop-up.
    • Raphmedia 9y ago
      There's nothing stopping you from extending your browser so that it's as wide as all your screens.
• holdenc 9y ago
  Append the modal component to the react app element, and then change the app state to open it. The disadvantage is that your modal exists outside of the component that opens it, so you can't pass in props from parent to child. But as long as the triggering component and the modal have access to the same app state store it's not a problem, and fairly clean.