React Portal Example Implementation

App.css

.alert {
  position: relative;
  top: 10px;
  left: 50%;
  translate: -50%;
  background-color: aquamarine;
  color: black;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
}

#modal-place {
  border: 2px solid #333;
  width: 300px;
  height: 300px;
}

.container {
  display: flex;
  justify-content: space-between;
}

.left {
  border: 2px solid #333;
  width: 300px;
  height: 300px;
}

.left::after {
  content: "LEFT";
}

.right {
  border: 2px solid #333;
  width: 300px;
  height: 300px;
}

.right::after {
  content: "RIGHT";
}

ReactPortalExample.jsx

import { useState } from "react";
import { createPortal } from "react-dom";
import "./App.css";

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <h1>Other Content</h1>
      <button onClick={() => setShow(true)}>Show Message</button>

      <Alert show={show} onClose={() => setShow(false)}>
        A sample message to show.
        <br />
        Click it to close.
      </Alert>
      <hr />
      <p>Some other content</p>
      <div className="container">
        <div className="left"></div>
        // Content from Alert component will teleport here. Neat! :D
        <div className="right" id="right"></div>
      </div>
    </div>
  );
}

const Alert = ({ children, onClose, show }) => {
  if (!show) return;

  return createPortal(
    <div className="alert" onClick={onClose}>
      {children}
    </div>,
    document.getElementById("right")
  );
};

export default App;