Master Modal, Tooltips and more with React createPortal

creating modals and tooltips in React was often complex hard to style and leads to many styling errors.
createPortal api simplify this process allowing to render components outside the main DOM, which results in ease of styling and maintainability. In this post we will learn how to use this tool to create modals and tooltips the right way in React.

Understanding createPortal api

createPortal is React build-in function that allows you to render component in different parts of the DOM. And it's particularly useful for building: Modals and Overlay, third-party Components and custom UI elements.

How it works

A portal is used inside the return statement of the component and it only changes the the physical placement of DOM node. it's like teleporting a DOM node outside the main DOM tree. The createPortal API access two parameters and third optional one:

• Children: anything that can be rendered with React, a div, component or React fragment.
• domNode: which is the location of the children to be placed.
• key (optional): a unique number or string to be used as portal key.

If we assume that we create a portal in component A and render it in component B, the children of the portal will access all the state and variable of component A and function as it is in component A while it's been rendered in component B.

Creating and using portal

In the example below portal is used to teleport component Child that accepts a state and move this component to the body.

import { createPortal } from 'react-dom'

const App = () => {
  const [state, setState] = useState()

  return(
    <div>
      <p> ... </p>
      createPoratl(
        <Child state={state} />,
        document.body
      )
    </div>
  )
}

export default App

Now the child component will be rendered in body tags in HTML.

Conclusion

createPortal is a valuable tool in React for creating modals, tooltips, and other components that need to be rendered outside of main DOM tree. by using this tool you can achieve a cleaner, more flexible, and more efficient approach of these elements.