Step-by-step guide on how to use a simple pop-up modal in a ReactJS application

Step 1: Create a New React App

If you haven’t already created a React app, you can do so using Create React App. Open your terminal and run the following commands

npx create-react-app react-modal-demo
cd react-modal-demo

Step 2: Install a Modal Library

For this example, we’ll use the react-modal library. Install it using npm

npm install react-modal

Step 3: Create Modal Component

Create a new component for your modal. In the src/components directory, create a file named ‘Modal.js’

// src/components/Modal.js
import React from 'react';
import Modal from 'react-modal';

const MyModal = ({ isOpen, closeModal, content }) => {
  return (
    
      

        Close Modal
        {content}
      
    
  );
};

export default MyModal;

Step 4: Use the Modal Component

Now, let’s use the MyModal component in your main component. Open src/App.js and modify it like this

// src/App.js
import React, { useState } from 'react';
import MyModal from './components/Modal';

function App() {
  const [modalIsOpen, setModalIsOpen] = useState(false);

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

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

  return (
    

      
Your App Content
      Open Modal

      Modal Content Goes Here
}
      />
    
  );
}

export default App;

Step 5: Style the Modal (Optional)

You may want to add some styles for the modal. In your src/index.css file, you can include some basic styles for the react-modal component

/* src/index.css */
.ReactModal__Overlay {
  opacity: 0;
  transition: opacity 300ms ease-in-out;
}

.ReactModal__Overlay--after-open {
  opacity: 1;
}

.ReactModal__Overlay--before-close {
  opacity: 0;
}

Step 6: Run Your App

Save your files and run your app

npm start

Open your browser and go to http://localhost:3000. You should see your React app with a button. Click the button to open the modal. The modal will display the content you specified.

That’s it! You’ve successfully added and used a pop-up modal in your ReactJS application. You can customize the modal component and styles further based on your application’s requirements.