Modal or Dialog Component in React JS

I’m going to explain how to create a very basic modal or dialog component in React JS and use it in other components in this post. Keep in mind that it is a very straightforward component without any particular designs. As a result, you can create your own designs. In addition, I employ the following tools and libraries:

• React JS
• tailwind

So let’s dive into the code. First, we develop the Dialog component in Dialog.tsx file.

import React, { useState } from 'react';
import styles from './Dialog.module.css';
import { Cross2Icon } from '@radix-ui/react-icons';

export default function Dialog({
  display,
  children,
  title,
  onClose,
}: {
  display: boolean;
  children: any;
  title: string;
  onClose: () => void;
}) {
    const [startClose, setStartClose] = useState(false);
    const onCloseClick = () =>{
        setStartClose(true); 
        setTimeout(() => {setStartClose(false);onClose()}, 400)
    }
  return (
    <div
      className={`${
        display ? "flex" : "hidden"
      } justify-center items-center fixed z-[1001] left-0 top-0 w-full h-full overflow-auto backfrop-blur-lg bg-[#00000066]`}
      onClick={() => onCloseClick()}
    >
      <div
        className={`${
          display && !startClose ? styles.modal_fade_in : styles.modal_fade_out
        } bg-white rounded-[20px] p-8 w-2/6`}
      >
        <div className="flex flex-row justify-between text-gray">
          {title}
          <button onClick={() => onCloseClick()}><Cross2Icon /></button>
        </div>
        <hr className="mt-3 mb-5 bg-gray h-[1px] border-none" />
        {children}
      </div>
    </div>
  );
}

Now we make a CSS file Dialog.module.css file in the component’s directory and develop codes to handle fade-in and fade-out animations for our Dialog display event.

.modal_fade_in {
  -webkit-animation: modalFadeIn .4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: modalFadeIn .4s; /* Firefox < 16 */
  -ms-animation: modalFadeIn .4s; /* Internet Explorer */
  -o-animation: modalFadeIn .4s; /* Opera < 12.1 */
  animation: modalFadeIn .4s;
}

@keyframes modalFadeIn {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes modalFadeIn {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes modalFadeIn {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes modalFadeIn {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes modalFadeIn {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}

.modal_fade_out {
  -webkit-animation: modalFadeOut .4s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: modalFadeOut .4s; /* Firefox < 16 */
  -ms-animation: modalFadeOut .4s; /* Internet Explorer */
  -o-animation: modalFadeOut .4s; /* Opera < 12.1 */
  animation: modalFadeOut .4s;
}


@keyframes modalFadeOut {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}

/* Firefox < 16 */
@-moz-keyframes modalFadeOut {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes modalFadeOut {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}

/* Internet Explorer */
@-ms-keyframes modalFadeOut {
  from {
    scale: 1;
  }
  to {
    scale: 0;
  }
}

/* Opera < 12.1 */
@-o-keyframes modalFadeOut {
  from {
    scale: 0;
  }
  to {
    scale: 1;
  }
}