Creating a Custom Modal in React js from Scratch

Welcome to React Challenge Day 11! Today, we will be learning how to create a custom modal in React js from scratch. A modal is a window that pops up in front of the webpage content and is commonly used for dialog boxes, user notifications, and other interactive components.

Step 1: Setup

First, make sure you have Node.js and npm installed on your system. If not, you can download and install them from the official website. Once you have Node.js and npm installed, you can create a new React project using the following command:

npx create-react-app custom-modal

Next, navigate to the newly created project folder and install the necessary dependencies:

cd custom-modal
npm install react-modal

Step 2: Create Modal Component

Now, let’s create a new file named Modal.js in the src directory. This file will contain the code for our custom modal component. Here’s a simple example of how to create a basic modal component:

import React from 'react';
import ReactModal from 'react-modal';

function Modal({ isOpen, onClose, children }) {
  return (
    
      {children}
    
  );
}

export default Modal;

Step 3: Implement Modal in App

Now that we have our modal component, let’s use it in our main App.js file. Import the Modal component and use it within the App component:

import React, { useState } from 'react';
import Modal from './Modal';

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

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

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

  return (
    

      
Custom Modal Example
      Open Modal
      
        
Welcome to my custom modal!
        
This is a custom modal component created in React js.
        Close Modal
      
    
  );
}

export default App;

Step 4: Style the Modal

Finally, you can add custom styles to the modal using CSS. ReactModal provides a way to pass custom styles to the modal through its prop. You can override the default styles and create a beautiful modal design that suits your application.

And that’s it! You have successfully created a custom modal in React js from scratch. Feel free to explore more advanced features and customization options to enhance the functionality and appearance of your modal component. Happy coding!