# How to do React-style Portals in Elm?

**URL:** <https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797>\
**Category:** Learn\
**Created:** [May 19, 2020, 1:22pm UTC](https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797 "2020-05-19T13:22:17Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![d4hines](https://avatars.discourse-cdn.com/v4/letter/d/34f0e0/32.png) [@d4hines](https://discourse.elm-lang.org/u/d4hines)\
**Post date:** [May 19, 2020, 1:22pm UTC](https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797/1 "2020-05-19T13:22:18Z")

</div>

Hello all,  
One feature we use pretty extensively at work is [React portals](https://reactjs.org/docs/portals.html), whereby a fragment of the component tree is mounted to a DOM element outside the DOM hierarchy. This is really convenient for things like menu’s.

Is there anyway to do this in Elm?  
Thanks

---

<div class="post-metadata">

**Author:** ![neurodynamic](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/neurodynamic/32/984_2.png) [@neurodynamic](https://discourse.elm-lang.org/u/neurodynamic)\
**Post date:** [May 19, 2020, 7:09pm UTC](https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797/2 "2020-05-19T19:09:32Z")

</div>

Not directly, I don’t think. This would probably have to be done via ports or a web component. If you want it to work exactly the same, you could probably make a web component that had some actual React code with a portal in it.

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [May 19, 2020, 7:29pm UTC](https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797/3 "2020-05-19T19:29:30Z")

</div>

There are also ways to implement elements “breaking-out” their container in pure Elm without portals, for example:  
[https://ellie-app.com/8TMQSgh7mwwa1](https://ellie-app.com/8TMQSgh7mwwa1)

See [A "popout" implementation in Elm](https://discourse.elm-lang.org/t/a-popout-implementation-in-elm/3168) for details.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [May 29, 2020, 7:29pm UTC](https://discourse.elm-lang.org/t/how-to-do-react-style-portals-in-elm/5797/4 "2020-05-29T19:29:43Z")

</div>

Closed on May 29, 2020, 7:29pm UTC

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.