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

678a2503a2995aa4815b2992a70d376c?s=128

shedrack akintayo

July 14, 2021
Tweet

Transcript

  1. Shedrack Akintayo A Subtle Introduction to React Portal

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

    at Platform.sh • Technical Writer • Community builder(Fb DevC Lagos, OSCA)
  3. • 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
  4. 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 .
  5. I probably have a solution for you

  6. 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?
  7. Huh?? What does that mean? Why would I need to

    do that?
  8. By default, an app is rendered in a single DOM

    node, the app root
  9. But what if you want to render children outside the

    root DOM node?
  10. 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
  11. • Modal dialog boxes • Tooltips • Hovercards • Loaders

    • Select Menu Use Cases?
  12. an example of a React Portal? where domNode is the

    parent DOM element for the children Component will be rendered.
  13. • 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
  14. 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
  15. You: Okay????? Me: wait!

  16. 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
  17. 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
  18. 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
  19. • 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
  20. Thank you! Shedrack Akintayo Title, Platform.sh @coder_blvk on twitter shedrack.akintayo@platform.sh