Working of React Portals

Leave a reply
More about InnovationM Admin
  InnovationM Admin
  31 Jan 20

ReactJS is one of the most powerful Javascript frameworks out there. It has a lot of small features that help build amazing user interfaces. React Portals is one such feature. They were introduced in version 16.0 of React.

React Portals are the child elements that won’t stay with the parent root node. The use cases of React Portals include tooltips, chat widgets, dialogs, modals and anything that needs to be rendered outside of the root component. It is beneficial when the parent component has ‘overflow: hidden’ or ‘z-index’ styling.

If you have visited the music-streaming websites and observed that music player continues to be visible even though webpages are changed on the website, it means ‘React Portals’ are used behind the scenes.

No matter portals are anywhere in the DOM tree, they still behave like a normal React child. React version 16.0 or higher support React Portals. The syntax for using React Portals is as follows:

React.createPortal(child,container)

Here, ‘child’ can be any renderable React child-like string, element and ‘container’ is a DOM element.

Let’s see the implementation of the React Portals in the below example. There is an ‘index.js’ file in the public folder.

index.html

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset ="utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<link rel = "manifest" href = "%PUBLIC_URL%/manifest.json">
<title>Working of ReactJS Portals</title>
</head>
<body>
<div id = "myPortal">
// In this div portal will be rendered
</div>
<div id = "root>
</div>
</body>
</html>

In the above ‘index.js’ file, you can see the ‘div tag’ used for ‘portal’ is separate from the main ‘root div’.

Now, there is another file ‘AudioPlayer.js’ under the src folder. This file will act like a child component to be rendered in the ‘portal’ div. This is done to show the AudioPlayer component on each page of the website when the user clicks on the play button in the music section.

AudioPlayer.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class AudioPlayer extends Component {
render(){
return ReactDOM.createPortal(
<div className = "myPortal">
<p> This is the audio player component to be visible on the screen.</p>
</div>,
document.getElementById('myPortal')
);
}
}
export default AudioPlayer;

You can see ReactDOM.createPortal is used to get two parameters, first one is the node component to be rendered in the portal div and the second param is the reference to the portal div in ‘index.js’.

Now, let’s move to the final ‘index.js’ file to see the working of React Portals along with other React Components.

index.js

import React, {Component} from 'react;
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter, Switch, Router} from 'react-router-dom';
import FirstPage from './FirstPage';
import SecondPage from './SecondPage';
import AudioPlayer from './AudioPlayer';
import './index.css';
class App extends Component {
render(){
return(
<div>
<AudioPlayer/>
<BrowserRouter>
<Switch>
<Route exact path = '/' component = {FirstPage}/>
<Route path = '/pgTwo' component = {SecondPage}/>
</Switch>
</BrowserRouter>
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();

Conclusion: 

  • Portals are the React way to render children outside of the root node.
  • Components rendered through Portals still remain in React’s control.
  • They only affect the DOM structure but not the overall React tree.

You can read more blogs on React.

1: React vs Angular: Let’s See Who Wins?
2: Understanding Of React Fiber Architecture
3: React – Let’s “Hook” up

InnovationM is a globally renowned Mobile app development company in India that caters to a strong & secure Android app development, iOS app development, hybrid app development services. Our commitment & engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively which makes us the best iOS app development company in India.

That’s all for this post. Hope you enjoyed learning. 🙂

Leave a Reply