Modals are common UI elements in modern web applications, often used for displaying content in an overlay that requires user interaction. In this tutorial, we'll create a simple and reusable modal component in React.

Step 1: Set Up the Project

First, create a new React project if you haven't already:

npx create-react-app react-modal-example
cd react-modal-example
npm start

Step 2: Create the Modal Component

Create a new file called Modal.js in the src folder. This component will represent the modal overlay and the content inside it.

import React from "react";
import "./Modal.css";

const Modal = ({ show, handleClose, children }) => {
  if (!show) return null;

  return (
    
       e.stopPropagation()}>
        
          ×
        
        {children}
      
    
  );
};

export default Modal;

Step 3: Styling the Modal

Create a file called Modal.css and add the following styles to make the modal look like an overlay:

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Modal Content */
.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  width: 500px;
  position: relative;
}

/* Close Button */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

Step 4: Use the Modal in the Main App

Now, let's use this modal in the main App.js file to demonstrate how it works. We'll create a button to trigger the modal visibility and show some content inside the modal.

import React, { useState } from "react";
import Modal from "./Modal";
import "./App.css";

const App = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => setShowModal(!showModal);

  return (
    
      Show Modal

      
        
React Modal Example

        
This is a simple modal component created in React!

        Close Modal
      
    
  );
};

export default App;

Step 5: Run the Application

Now, run your app and click the "Show Modal" button. The modal will appear on top of the page, and you can close it by clicking the close button or anywhere outside the modal overlay.

npm start

✅ Pros:

  • 🔄 Easy to integrate into existing React apps
  • 🎨 Customizable styling for your modal
  • 🎯 Reusable modal component

⚠️ Cons:

  • ⚡ Simple modal; more complex modals may require additional features like animations, escape key support, etc.
  • 🧩 Requires careful management of open/close states across the app

Summary

In this tutorial, we built a simple modal component in React. We created the modal structure, styled it, and made it reusable for any content inside. You can further enhance this modal with animations, keyboard support, and more advanced features as needed.

Now you can use this modal in your projects to provide a better user experience with overlay content.

For a much more extensive guide on getting the most out of React portals, check out my full 24-page PDF file on Gumroad. It's available for just $10:

Using React Portals Like a Pro.

If this was helpful, you can also support me here: Buy Me a Coffee ☕