Create a modal with React!

Hey fellow creators,

Let's create an awesome modal with React!

If you prefer to watch the video version, it's right here :

Let's start building!

1. Create your component.

In the Modal.js file, create a component that'll use useState.
Add a const with modal and setModal, making sure the state is false to begin with, so that the modal doesn't show upon opening the website.

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

export default function Modal() {
  const [modal, setModal] = useState(false);

  return (
        <>

    </>
    );
}

2. Create a button that'll trigger the pop-up.

Add a button inside of the return, with an onClick parameter that'll trigger the function we'll create in a second.

return (
    <>
        <button onClick={toggleModal} className="btn-modal">
        Open
      </button>
        </>
    );

Here's the function: when you click on the button, it'll change the state from false to true or the other way around.

const toggleModal = () => {
    setModal(!modal);
  };

3. Create the modal.

Create the content of your modal with the appropriate classnames for your css and make sure not to forget to add the onClick functions that'll trigger the opening or closing of your modal.

<div className="modal">
    <div onClick={toggleModal} className="overlay"></div>
   <div className="modal-content">
    <h2>Hello Modal</h2>
     <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
              perferendis suscipit officia recusandae, eveniet quaerat assumenda
              id fugit, dignissimos maxime non natus placeat illo iusto!
              Sapiente dolorum id maiores dolores? Illum pariatur possimus
              quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
              placeat tempora vitae enim incidunt porro fuga ea.
    </p>
      <button className="close-modal" onClick={toggleModal}>
     CLOSE
       </button>
     </div>
</div>

4. Render the modal conditionally.

Add the curly brackets and your condition so that the modal only shows if the state is true (that is, if you've clicked on the "open" button).

{modal && (
        <div className="modal">
          <div onClick={toggleModal} className="overlay"></div>
          <div className="modal-content">
            <h2>Hello Modal</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident
              perferendis suscipit officia recusandae, eveniet quaerat assumenda
              id fugit, dignissimos maxime non natus placeat illo iusto!
              Sapiente dolorum id maiores dolores? Illum pariatur possimus
              quaerat ipsum quos molestiae rem aspernatur dicta tenetur. Sunt
              placeat tempora vitae enim incidunt porro fuga ea.
            </p>
            <button className="close-modal" onClick={toggleModal}>
              CLOSE
            </button>
          </div>
        </div>
      )}

Now as you can see, there are two ways for you to close the modal:

either by clicking on the close button of course.
or by clicking on the overlay.

One last thing! Imagine there's a text below your "open" button. For a better user experience, you don't want this long paragraph to scroll down when the modal is open. To prevent that, you need to add a condition so that if the modal is opened, then the scrolling will not be possible:

body.active-modal {
    overflow-y: hidden;
}

if(modal) {
    document.body.classList.add('active-modal')
  } else {
    document.body.classList.remove('active-modal')
  }

Try with the full code and you'll see by yourself that it's now fixed! Make sure to check out the CSS file as well.

Have fun experimenting and make sure to check out my other tutorials!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.

Blog

Create a modal with React!

Ustariz Enzo

1. Create your component.

2. Create a button that'll trigger the pop-up.

3. Create the modal.

4. Render the modal conditionally.

Join Our Newsletter. No Spam, Only the good stuff.

Related