How to show/hide Modal in React

Modals are a popular UI component used to display important information or capture user input in a non-intrusive manner. In this article, we'll explore how to create a modal in React using the powerful styled-components library.

Prerequisites: Before we dive into the implementation, make sure you have a basic understanding of React and styled-components. Familiarity with JavaScript and JSX syntax will also be helpful.

Setting Up the Project: To begin, create a new React project using your preferred setup. Once your project is set up, install the necessary dependencies by running the following command:

npm install styled-components

Styling the Modal: To style the modal, we leverage the power of styled-components. Take a look at it used in the code snippet below:

import styled from "styled-components";

const Overlay = styled.div`
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(52, 64, 84, 0.6);
  backdrop-filter: blur(8px);
  animation: fadein 0.5s;

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;

const Modal = styled.div`
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25rem;
  height: 18rem;
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.1),
    0px 8px 8px -4px rgba(16, 24, 40, 0.04);
  transition: all 0.5s ease;
  z-index: 1;
`;

//The rest of elements content inside the Modal
const Icon = styled.img`
  // Icon styles 
`;

const Title = styled.div`
  //Title styles 
`;

const Text = styled.div`
  // Text styles 
`;

const Wrapper = styled.div`
  // Wrapper styles 
`;

const CancelButton = styled.button`
  // Cancel button styles 
`;

const ContactButton = styled.button`
  // Contact button styles 
`;

By applying styles to each component, we can easily customize their appearance. I won't populate the article with stylings of other elements. The Overlay, Modal and CancelButton though, are what we need here.

Implementing the ContactModal Component:
To create the functional component, Let's take a closer look at the code:

//typescript value
type ModalProps = {
  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
};

export function ContactModal({ setShowModal }: ModalProps) {
  return (
    <Overlay onClick={() => setShowModal(false)}>
      <Modal onClick={(e) => e.stopPropagation()}>
        {/* Modal Content */}
          <CancelButton
            onClick={() => setShowModal(false)}
          >
            Cancel
          </CancelButton>
      </Modal>
    </Overlay>
  );
}

In the code above, we define the ContactModal component. The Overlay component represents the backdrop of the modal, while the Modal component encapsulates the actual content. By using the onClick event handlers, we can control the visibility of the modal by toggling the showModal state.

We put stopPropagation() in Modal component's onClick function so that when we clicked it, it prevents from closing the modal pop up.

Triggering the Modal: To trigger the modal, we integrate it into our LandingPage . Here's an example of how it can be done:

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

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

  return (
    <div>
      <ContactButton
        onClick={() => setShowModal(!showModal)}
      >
        {/* Contact button icon */}
      </ContactButton>
      {showModal && <ContactModal setShowModal={setShowModal} />}
    </div>
  );
};

In the LandingPage, we use the showModal state and the setShowModal function from the useState hook to control the visibility of the modal. When the contact button is clicked, the showModal state is toggled, rendering or hiding the ContactModal component accordingly.

Conclusion:

Remember, modals are versatile components that can be customized further based on your specific requirements. You can add additional functionality such as animations, form inputs, or dynamic content to enhance the user experience.

By mastering the creation of modals and utilizing libraries like styled-components, you can elevate the visual appeal and user interaction of your React applications.

Do you have comments or suggestions about this article, please I’m open to any of them.Thank you!

Hope this helps!

Warmly,
Cath