Select Page

Creating a Reusable Modal Component in React.js: A Step-by-Step Tutorial

by | Aug 6, 2023

Modals are a common UI element used to display additional content or capture user input without navigating away from the current page.

In this tutorial, we’ll walk through the process of creating a reusable modal component in React.js. This component can be easily integrated into any React application, promoting code reusability and maintainability.

Create the Modal Component

  1. Inside the src folder, create a new directory named components.
  2. Inside the components directory, create a file named Modal.js.
// src/components/Modal.js
import React from 'react';
import './Modal.css';

const Modal = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-content">
        <button className="close-button" onClick={onClose}>
          &times;
        </button>
        {children}
      </div>
    </div>
  );
};

export default Modal;

Style the Modal

  1. Create a file named Modal.css inside the components directory.
  2. Style the modal overlay and content as desired. For example:
/* src/components/Modal.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  width: 80%;
  max-width: 400px;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

Using the Reusable Modal Component

  1. Open the src folder and create a file named App.js.
  2. Use the Modal component within App.js:
// src/App.js
import React, { useState } from 'react';
import './App.css';
import Modal from './components/Modal';

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="App">
      <button onClick={openModal}>Open Modal</button>
      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Hello from Modal!</h2>
        <p>This is a reusable modal component in React.</p>
      </Modal>
    </div>
  );
}

export default App;

 

Test the Reusable Modal Component

  1. Run the development server
  2. Open your browser and navigate to http://localhost:3000.
  3. Click the “Open Modal” button to see the reusable modal component in action.

Reusable Modal Component in React.js

Conclusion:

Congratulations! You’ve successfully created a reusable modal component in React.js.

You can now integrate this component into any React application to display modals with ease.

This promotes code reusability and enhances the maintainability of your projects. Feel free to customize the styling and functionality of the modal component to suit your specific needs.

Happy coding!

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Looking For Something?

Follow Us

Related Articles

Understanding Layouts in React

Understanding Layouts in React

If you're someone who works with React, you might think you know what a layout is. But, do you really? React, a popular JavaScript library for building user interfaces, employs the concept of layouts to organize and structure web applications. Despite its widespread...

useSyncExternalStore React API

useSyncExternalStore React API

You might have heard about a new tool called useSyncExternalStore() in React 18. It helps connect your React app to outside data sources. Usually, it's used by fancy internal tools like Redux to manage state. The official documentation explains that...

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!