0Pricing
React Academy · Lesson

Building a Modal Component with Portals

Create a reusable modal that renders into document.body via createPortal.

Building a Modal Component with Portals is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will build a reusable Modal component that uses React.createPortal to render into document.body, with backdrop click and Escape key close support.

Modal Component Skeleton

Start with the basic structure: a Modal component that accepts `isOpen`, `onClose`, and `children` props. When `isOpen` is false, render nothing.
function Modal({ isOpen, onClose, children }) {
  if (!isOpen) return null;
  return createPortal(
    <div className="backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        {children}
      </div>
    </div>,
    document.body
  );
}

Backdrop & Stop Propagation

The outer `backdrop` div covers the whole screen. Clicking it calls `onClose`. The inner `modal` div calls `e.stopPropagation()` so clicks inside the modal do not bubble to the backdrop and accidentally close it.

Closing with the Escape Key

Add a `useEffect` that listens for the `keydown` event. When the Escape key is pressed and the modal is open, call `onClose`. Remove the listener on cleanup.
useEffect(() => {
  if (!isOpen) return;
  const handle = (e) => { if (e.key === 'Escape') onClose(); };
  document.addEventListener('keydown', handle);
  return () => document.removeEventListener('keydown', handle);
}, [isOpen, onClose]);

Preventing Body Scroll

When a modal is open you usually want to prevent the page behind it from scrolling. Add and remove `overflow: hidden` on `document.body` inside a `useEffect`.
useEffect(() => {
  if (isOpen) {
    document.body.style.overflow = 'hidden';
  }
  return () => { document.body.style.overflow = ''; };
}, [isOpen]);

Basic CSS for the Modal

The backdrop should be a full-screen fixed overlay. The modal box should be centered. A minimal CSS approach uses flexbox on the backdrop to center the modal.
.backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  background: white;
  border-radius: 8px;
  padding: 24px;
  min-width: 320px;
}

Using the Modal

Control the modal with a boolean state variable in the parent. Pass `isOpen` and `onClose` props to the Modal. Put any content as children.
function App() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      <Modal isOpen={open} onClose={() => setOpen(false)}>
        <h2>Hello from the modal!</h2>
        <button onClick={() => setOpen(false)}>Close</button>
      </Modal>
    </>
  );
}

Adding a Close Button Inside

Always provide an explicit close button inside the modal for users who cannot use the keyboard or do not notice the backdrop. Pass `onClose` down to the content via children or a prop.

Animation with CSS Transitions

For a fade-in effect, instead of returning null when closed, always render the portal but toggle a CSS class. Use a CSS `opacity` and `transform` transition on the backdrop.
// Toggle class based on isOpen
<div className={`backdrop ${isOpen ? 'visible' : 'hidden'}`}>

Composing a Modal Header & Footer

Break the modal into sub-components: `Modal.Header`, `Modal.Body`, `Modal.Footer`. Use the compound component pattern so consumers can compose modal layout without class name knowledge.

Quick Check

Why do we call e.stopPropagation() on the inner modal div's onClick handler?

Recap

You built a Modal with createPortal: backdrop click closes it, Escape key closes it, body scroll is locked while open, and stopPropagation keeps inside-modal clicks from closing it.

Up Next

Next lesson: **Handling Focus & Keyboard Traps in Modals** — you will keep focus inside the modal while it is open to meet accessibility requirements.

Frequently asked questions

Is the “Building a Modal Component with Portals” lesson free?

Yes — the full text of “Building a Modal Component with Portals” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Building a Modal Component with Portals”?

Create a reusable modal that renders into document.body via createPortal. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Building a Modal Component with Portals” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. What Are React Portals?
  2. Building a Modal Component with Portals
  3. Handling Focus & Keyboard Traps in Modals
  4. Tooltips & Dropdown Menus with Portals
← Back to React Academy