$30 off During Our Annual Pro Sale. View Details »

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
Tweet

More Decks by shedrack akintayo

Other Decks in Programming

Transcript

  1. Shedrack Akintayo
    A Subtle
    Introduction to
    React Portal

    View Slide

  2. BIO.
    Shedrack Akintayo
    Lagos (Nigeria)
    Developer Relations
    Engineer
    ● Work at
    Platform.sh
    ● Technical
    Writer
    ● Community
    builder(Fb DevC
    Lagos, OSCA)

    View Slide

  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

    View Slide

  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 .

    View Slide

  5. I probably have a solution for you

    View Slide

  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?

    View Slide

  7. Huh?? What does that
    mean? Why would I need
    to do that?

    View Slide

  8. By default, an app is rendered in a single DOM node, the app root

    View Slide

  9. But what if you want to render children
    outside the root
    DOM node?

    View Slide

  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

    View Slide

  11. ● Modal dialog boxes
    ● Tooltips
    ● Hovercards
    ● Loaders
    ● Select Menu
    Use Cases?

    View Slide

  12. an example of
    a React Portal?
    where domNode is the parent DOM element for the
    children Component will be rendered.

    View Slide

  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

    View Slide

  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

    View Slide

  15. You: Okay?????
    Me: wait!

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  20. Thank you!
    Shedrack Akintayo
    Title, Platform.sh
    @coder_blvk on twitter
    [email protected]

    View Slide