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

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
    shedrack.akintayo@platform.sh
    

    View Slide