React Portal – gitconnected

  • React PortalRender your a React component gets rendered in its parent DOM container, but in some cases you would need to render a component outside of parent/host DOM element.For example, in dropdowns, tooltips or modal windows, a child component/element may get hidden due to parent component’s overflow:hidden or zindex css.This can…
  • React 16 introduced the Portal which provides a method to render a component in a DOM node that exists outside of parent component.
  • Similar to how we render our React app into a DOM node by targeting its ID, we can do the same thing to render the portal.
  • Portals also allow event bubbling making it behave like a normal child node and propagate the event to parent component in react tree.Portal ExampleI have created a dropdown to show the scenario where we would need Portal.
  • One way to create a dropdown is using inline menu child component.

Normally a React component gets rendered in its parent DOM container, but in some cases you would need to render a component outside of parent/host DOM element. This can be fixed by rendering child…

Normally a React component gets rendered in its parent DOM container, but in some cases you would need to render a component outside of parent/host DOM element.

For example, in dropdowns, tooltips or modal windows, a child component/element may get hidden due to parent component’s overflow:hidden or zindex css.

This can be fixed by rendering child component outside of the parent container. React 16 introduced the Portal which provides a method to render a component in a DOM node that exists outside of parent component. Similar to how we render our React app into a DOM node by targeting its ID, we can do the same thing to render the portal.

Portals allow us to detach the component and render it anywhere while maintaining its props, state or context. Portals also allow event bubbling making it behave like a normal child node and propagate the event to parent component in react tree.

then inline menu gets hidden behind the parent container as shown in below image.

This issue could be fixed easily by rendering the menu outside of parent container. This is exactly where react portal comes into play.

Portals provide simple api to solve this.

to render.

The best thing about portal is that it can render component anywhere, even in different document’s DOM. This blog by David Gilbertson provides an interesting read about rendering component child into different window using a portal. I…

React Portal – gitconnected