https://react.dev/reference/react-dom/createPortal
What is that
We can specify DOM element for rendering
When we could use it
For example, If we want to write <Modal /> component in some component, but want to rendering other parent component (ex. document.body)
We could write Modal, Popover component easily ignoring parent CSS effect like overflow: hidden.
And no matter what it is, easy to read code.
Example
this is example that modal opens center of window by using createPortal
import React, { useState } from 'react'; import ReactDOM from 'react-dom'; function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return ReactDOM.createPortal( <div style={styles.overlay}> <div style={styles.modal}> {children} <button onClick={onClose} style={styles.closeButton}>Close</button> </div> </div>, document.body // ⭐️ the rendering destination of Portal ); } export default function App() { const [isModalOpen, setIsModalOpen] = useState(false); return ( <div> <button onClick={() => setIsModalOpen(true)}>Open Modal</button> <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}> <h1>Hello, Modal!</h1> </Modal> </div> ); } const styles = { overlay: { ⭐️ position: 'fixed', ⭐️ top: 0, ⭐️ left: 0, ⭐️ width: '100vw', ⭐️ height: '100vh', backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 1000, }, modal: { ... }, closeButton: { ... }, }; 
Top comments (0)