What Is React Teleportation?

Transporting React components to other React components with portals

Robert S (codeBelt)
Oct 20 · 3 min read
Image of a crater or hole, dark and colored blue.
Image of a crater or hole, dark and colored blue.
Photo by Paweł Czerwiński on Unsplash

Have you ever wanted to render a React component in a totally different part of your app? In this article, I will show you how to do that while still having control of it within the first component.

If you look at the example below we have a PortalIn component that will take whatever is passed into it and render it out where the PortalOut component is. To make this work, the two React components need to have the same portalType (I’m using headerPortal for the identifier). They also need to be wrapped within the PortalProvider.

Take a look at the animation below. There is a portal in the header, to the left of the notification bell. There are a few things to keep in mind:

  • The Welcome page does not send anything to the header portal.
Animation of portals being used.
Animation of portals being used.
React App with Internal Portals

We are going to use the React Context API to create a PortalProvider with two other React components PortalIn and PortalOut.

Let’s start with the PortalOut component first. You will notice we have access to a PortalContext and on there is a portalMap object which is a JavaScript Map object to keep track of the portal components, this allows us to reuse the PortalIn/PortalOut components with the help of the portalType. When the PortalOut renders it will either render a React component from the portalMap, or nothing because there is no match for the portalType.

Looking at the PortalIn component, you can see we access the addPortalItem and removePortalItem functions from the PortalContext.

  • Within React.useEffect we send the portalType and children to the PortalProvider via the addPortalItem function where it is added to the portalMap object that is in PortalOut.

Finally, let’s look at how we use React Context Provider to create our PortalProvider. We use React.useState and Map to hold onto holds key-value pairs which is the portalType and the component we passed in via the React.children and portalType props.

Hopefully, this makes sense but if you are wondering why we need to create a new Map each time, it’s because we need useState to trigger an update whenever the addPortalItem or removePortalItem functions are called.

Check out the Next.js Example and/or the source code.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store