TheLazy.Dev
Portfolio GitHub

Blog

react |portals |javascript

React Portals: Intro

harireddy7

Hari Kotha

Posted on August 22, 2021

React Portals: Intro

Image description

This article will cover -

  • Basic intro to Portals in React.js
  • Why & How to use react portals

React Portals

Renders react components outside of root DOM element

What is a Portal

React renders all its components inside a single root DOM element (ideally of id = "root").

If instead, we have a use-case where we want to render a component outside of this root element, we use a concept called React Portals.

How to create Portals

Ideally, to bootstrap a react app, we use ReactDOM.render method to render our react app to root element.

<div id="root"></div>
Enter fullscreen mode Exit fullscreen mode 
ReactDOM.render(<SomeReactComponent />, document.getElementById('root)
Enter fullscreen mode Exit fullscreen mode

Similarly, To create a portal we use ReactDOM.createPortal method which takes two parameters

  1. React Component or JSX
  2. HTML DOM element 
<div id="root"></div>
<div id="portal"></div>
Enter fullscreen mode Exit fullscreen mode 
ReactDOM.createPortal(
    <h1>Portal goes here</h1>,
    document.getElementById('portal')
)
Enter fullscreen mode Exit fullscreen mode

Why to use React Portals

We can use Portals while creating a Modal or Popup as these occupy space outside of the normal element ordering/stacking. Modals sometimes cover the whole page for example take a look at the below code -

<Wrapper style={{ maxWidth: '250px', zIndex: 1, position: 'relative' }}>
    <Modal open style={{ zIndex: 1000, postion: 'fixed', top: 0, left: 0 }}>
        <p>Some content inside Modal</p>
    </Modal>
</Wrapper>

<OtherWrapper style={{ zIndex: 100 }}>
    <div>some other content</div>
</OtherWrapper>
Enter fullscreen mode Exit fullscreen mode

As per the example above, Modal is being rendered inside a Wrapper that has max-width limitation and a z-index set to 1. That means even though Modal has a z-index of 1000, it cannot be on top of everything because OtherWrapper has a higher z-index than Wrapper.

Hence, Modal(z-index=1000) will be still under OtherWrapper(zIndex=100) as Modal is inside Wrapper(z-index=1).

To overcome these kinds of issues, we can implement a Portal to render Modal -

  <body>
    <div id="root"></div>
    <div id="portal-root"></div>
  </body>
Enter fullscreen mode Exit fullscreen mode 
return ReactDOM.createPortal(
    <div>
        Modal content goes here
    </div>,
    document.getElementById('portal-root')
)
Enter fullscreen mode Exit fullscreen mode

This will render the Modal component inside portal-root DOM element outside the root element. However, this is will be kept as usual in React component tree & events are listened & executed as before.

Thanks for checking!
Stay safe :)

References:
https://reactjs.org/docs/portals.html

💖 💪 🙅 🚩
harireddy7
Hari Kotha

Posted on August 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Creating an iOS-like Slide-Up Drawer with React Portals
webdev Creating an iOS-like Slide-Up Drawer with React Portals

July 5, 2024

React Portals: Intro
react React Portals: Intro

August 22, 2021