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…
Continue reading “React Portal – gitconnected”