Continuing the "Mastering ReactJS Series", in this blog we will learn about createPortal
.
To watch my previous videos, please check here:
Error boundary
useLayoutEffect
use state
useEffect
To read blogs:
- Link
What is createPortal
As per the official documentation, createPortal
let us render some children into a different part of the DOM.
In simple words,createPortal
lets you to render the component outside the current parent, or hierarchy.
In above diagram, because we are using createPortal
, 2nd div will be render outside the parent's div.
Use cases
Tooltips
Modals
Rendering different parts of DOM
React components render to non-react components
React components render to server-side content
Syntax
import { createPortal } from 'react-dom';
createPortal(children, domNode, key?)
children: the jsx
domNode: where you want the portal to be created
key: an optional, A unique string or number to be used as the portal’s key.
Code
- render outside current parent hierarchy
import React from "react";
import { createPortal } from "react-dom";
function App() {
return (
<div style={{ padding: "100px" }}>
<h1>React Tooltip with Portal</h1>
{createPortal(<h1>I am from create portal</h1>, document.getElementById('root') )}
</div>
);
}
export default App;
2 . render inside the root
import React from "react";
import { createPortal } from "react-dom";
function App() {
return (
<div style={{ padding: "100px" }}>
<h1>React Tooltip with Portal</h1>
{createPortal(<h1>I am from create portal</h1>, document.getElementById('root') )}
</div>
);
}
export default App;
3 . create a separate component
return ReactDOM.createPortal(
<div style={{ ...tooltipStyle, top: position.top, left: position.left }}>
{text}
</div>,
document.body
);
Check code examples here
Happy Learning!!
Top comments (2)
This is super useful! Thank-you Neha!
thank you Anisha