Creating a Reusable Modal Component in React : Tips and Best Practices

I’m back! Hello, my name is Tushar and I’m a full stack web developer. In my previous posts, I’ve written about topic Exploring Custom Hooks in React . Today, I’m excited to delve into the topic of Modal Component, which are a commonly used UI element that can help enhance the user experience by providing additional information or options without navigating to a new page. We will be discussing how to create a reusable modal component in React using hooks and how to implement various features such as opening and closing the modal, passing data to the modal, and handling user interactions within the modal. Whether you’re a beginner or a seasoned developer, I hope you’ll find this post informative and helpful. So without further ado, let’s get started!

Modal.jsx

export const Modal = ({ shouldShow, onRequestClose, children }) => {
  return shouldShow ? (
    <div
      classname="fixed flex items-center justify-center z-[1] h-full w-full bg-black/40 overflow-auto"
      onClick={onRequestClose}
    >
      <div
        classname="w-3/4 p-5 bg-slate-300 rounded-lg"
        onClick={(e) => {
          e.stopPropagation();
        }}
      >
        <button classname="text-xl" onClick={onRequestClose}>
          X
        </button>
        {children}
      </div>
    </div>
  ) : null;
};

This code exports a Modal component in React. The component takes three props: shouldShow, onRequestClose, and children.

The shouldShow prop determines whether the modal should be displayed or not. If it is true, the modal is displayed; if it is false, the modal is not displayed.

The onRequestClose prop is a callback function that is called when the user clicks outside of the modal or clicks the close button. This function can be used to handle any necessary cleanup or additional actions when the modal is closed.

The children prop is used to pass in the content that will be displayed within the modal.

The component is implemented using a ternary operator to conditionally render the modal based on the value of shouldShow. If shouldShow is true, the modal is rendered as a fixed position element in the center of the screen with a semi-transparent background. The content of the modal is contained within a div element that is styled to be a specific width, with padding and rounded corners. The close button is implemented as a simple "X" character that triggers the onRequestClose callback when clicked.

Overall, this Modal component is a simple and reusable way to display content in a modal window within a React application.

For styling i’ve used Tailwindcss.

app.jsx

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

const app = () => {
  const [showModal, setshowModal] = useState(false);

  return (
    <div>
      <button
        classname="p-4"
        onClick={() => {
          setshowModal((prev) => !prev);
        }}
      >
        show modal
      </button>

      <Modal
        shouldShow={showModal}
        onRequestClose={() => {
          setshowModal((prev) => !prev);
        }}
      >
        <div>Your Modal</div>
      </Modal>
    </div>
  );
};

export default app;

The above code is a React component that imports and utilizes the Modal component. It defines a state variable showModal using the useState hook and initializes it to false.

The app component renders a button that, when clicked, toggles the value of showModal by calling setshowModal with the previous value negated.

The Modal component is then rendered conditionally based on the value of showModal.

Conclusion :

One disadvantage of using the react-modal npm package over a custom modal component is that it adds an additional dependency to your project, which can increase the size of your project and potentially slow down your application. Additionally, react-modal requires you to wrap your application with a ModalProvider component, which may require refactoring of your existing codebase. On the other hand, a custom modal component can be tailored to the specific needs of your application, without any additional overhead or configuration requirements.

I hope this article has given you a better understanding of custom Modal component in React and how you can make one. If you have any questions or comments, feel free to reach out to me via findtushar.tech