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
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