Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Subtle Introduction to React Portals

A Subtle Introduction to React Portals

Portals in React is the way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

In this talk, I'll introduce the audience to :

what portals in React are,
Benefits of React Portals,
Real-world use cases for Portals and
How portals in React can help improve the accessibility of custom widgets

shedrack akintayo

July 14, 2021

More Decks by shedrack akintayo

Other Decks in Programming


  1. BIO. Shedrack Akintayo Lagos (Nigeria) Developer Relations Engineer • Work

    at Platform.sh • Technical Writer • Community builder(Fb DevC Lagos, OSCA)
  2. • Section 1 • Section 2 • Section 3 •

    Section 4 • Section 5 Table of contents • What is React Portal • Use cases • A typical example of a React Portal • Benefits of React portal to developers • Improving accessibility in custom widgets with React portal Table of contents
  3. Have you ever had overflow: hidden or stacking context issues?

    Like when you want to build some tooltip or dropdown, but it’s cut by the parent element .
  4. Portals were introduced to the library in version 16.0 and

    according to the documentation, React Portal is a first-class way to render child components into a DOM node outside of the parent DOM hierarchy defined by the component tree hierarchy. What is React Portal?
  5. You would want to do that when a parent element

    has styling (like a z-index pushing it to the front of the page or an overflow: hidden) but you want the child to visually appear on top of its container. i.e render the Child element outside the parent element e.g a modal
  6. an example of a React Portal? where domNode is the

    parent DOM element for the children Component will be rendered.
  7. • Create more accessible custom widgets • Build better widgets

    • Gives developer an advantage to add a component outside the current DOM hierarchy by maintaining the event bubbling and state management. • React Portals make listening to events in your dialogs, hovercards, etc, as easy as if they were rendered in the same DOM tree as the parent component. Benefits of React portal to developers
  8. React Portal is great for building things like modals and

    custom select menu, because it makes it easy to trap focus within the modal That way keyboard users don't find themselves outside of an open modal. Improving accessibility in custom widgets with React portal
  9. Actually, with a portal, you still need to do the

    work of keeping focus locked-in, but it's much easier with a portal because the modal content is rendered next to the application root. So, simply setting display to none on the application root would prevent focus from going into the rest of the application. You can further enhance this by managing the tab focus too. Improving accessibility in custom widgets with React portal
  10. The best way to visualize the accessibility problem mis using

    a native select built without a React Portal. Check this out: https://codepen.io/ericrasch/pen/zjDBx Notice that, while the select is open, you can't do anything. You can't even close the tab. You must exit the select context before you can interact with the rest of the application/browser. Improving accessibility in custom widgets with React portal
  11. With a React Portal, We can interact with the rest

    of the application/browser without having to close the modal or select widget. Improving accessibility in custom widgets with React portal
  12. • Children rendered through portals are still under React’s control.

    • Portals only affect the DOM structure, never the React components tree. • Use React portals when you run into overflow: hidden or stacking context issues! Things to Note When Using React Portals