Would you be interested in setting up your modals in a React + Next.js project?

In this post, I’ll walk you through a fully-featured and reusable Modal component that:

1- Supports multiple entry/exit animation alignments,
2- Handles back navigation when closed,
3- Works across small and large devices selectively,
4- Uses React Portals to render outside the component tree, and
5- Is styled using Tailwind CSS for rapid development.

No more rewriting modals from scratch every time! Let’s build one you can plug into any project. 👇

✅ Why Use This Modal Component?
This component is modular, responsive, animated, and portable — making it ideal for use in real-world web apps and dashboards.

Use cases:
1- Displaying forms, filters, or dynamic content without page reloads.
2- Creating full-screen mobile modals.
3- Conditionally showing modals on different screen sizes.
4- Enhancing UX with entry/exit animations.

import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
import { createPortal } from "react-dom";
import { useRouter } from "next/navigation";

const Modal = ({
  show,
  setShow,
  children,
  alignment,
  className,
  isIntercepting = false,
  showCancelBtnINSmallDevice = false,
  isOnlySmallDevice = false,
  isOnlyLargeDevice = false,
}: {
  show: boolean;
  setShow: Dispatch<SetStateAction<boolean>>;
  children: React.ReactNode;
  alignment: "left" | "center" | "right" | "top" | "bottom";
  className?: string;
  isIntercepting?: boolean;
  showCancelBtnINSmallDevice?: boolean;
  isOnlySmallDevice?: boolean;
  isOnlyLargeDevice?: boolean;
}) => {
  const [animate, setAnimate] = useState(false);
  const redirect = useRouter();

  let appearAnimation;
  let disappearAnimation;

  if (alignment === "left") {
    appearAnimation = "translate-x-0";
    disappearAnimation = "-translate-x-1/2";
  } else if (alignment === "center") {
    appearAnimation = "scale-1";
    disappearAnimation = "scale-0";
  } else if (alignment === "right") {
    appearAnimation = "translate-x-0";
    disappearAnimation = "translate-x-1/2";
  } else if (alignment === "top") {
    appearAnimation = "translate-y-[-227px]";
    disappearAnimation = "-translate-y-[100%]";
  } else if (alignment === "bottom") {
    appearAnimation = "translate-y-[227px]";
    disappearAnimation = "translate-y-[100%]";
  }

  useEffect(() => {
    if (show) {
      setAnimate(true);
    } else {
      setAnimate(false);
    }
  }, [show]);

  const handleClose = (e: React.MouseEvent) => {
    e.stopPropagation();
    setAnimate(false);
    if (isIntercepting) {
      redirect.back();
    }
    setTimeout(() => setShow(false), 300);
  };

  return createPortal(
    <div
      className={`fixed inset-0 z-50 backdrop-blur-sm bg-black-transparent transition-opacity duration-300 ease-in-out flex items-center 
      ${animate ? "opacity-100" : "opacity-0"}
      ${alignment === "right" && "justify-end"} 
      ${alignment === "center" && "justify-center"} 
      ${isOnlySmallDevice && "md:hidden"} 
      ${isOnlyLargeDevice && "hidden md:flex"}`}
      onClick={handleClose}
    >
      <div
        className={` relative shadow-black-50 drop-shadow-2xl bg-white lg:p-5 duration-300 ease-in-out
         ${alignment !== "center" && "h-full md:h-[calc(100%-16px)] md:m-2"}
           ${animate ? appearAnimation : disappearAnimation} ${className}`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* close handler */}
        <button
          className={`hover:rotate-90 transition-all duration-200 absolute top-5 right-5 lg:top-6 lg:right-6 text-black hover:text-[#ff4b4b] font-bold z-50 ${
            showCancelBtnINSmallDevice ? "block" : "hidden"
          }`}
          onClick={handleClose}
        >
          &#10005;
        </button>
        {/* children */}
        {children}
      </div>
    </div>,
    document.body
  );
};

export default Modal;

🎯 Key Features:
✅ Fully reusable with props for control
✅ Device-based rendering (show only on mobile or desktop)
✅ Multiple alignment-based animations (left, center, right, top, bottom)
✅ Portal rendering with createPortal for proper stacking
✅ Interceptable close behavior (router.back() support)
✅ Tailwind CSS-based transitions & styling
✅ Clean separation of logic and UI control

💡 How It Works (in short):
1- show: Boolean toggle for modal visibility.
2- alignment: Determines the animation direction (like slide in from left, right, or scale in center).
3- isIntercepting: Useful for routing scenarios — goes back in history on close.
4- isOnlySmallDevice, isOnlyLargeDevice: Control modal visibility by device size.
5- createPortal: Ensures the modal is placed outside the component tree (document.body).

✅ Pros:
🎨 Highly customizable
📱 Responsive: Tailored for mobile and desktop experiences
🚀 Lightweight and performant
🧩 Easy to integrate in any layout
🔁 Reusable across routes and pages
🧠 Intuitive API for developers

🧪 Example Usage:

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

<Modal
  show={showModal}
  setShow={setShowModal}
  alignment="right"
  isIntercepting={true}
  showCancelBtnINSmallDevice={true}
>
  <div>Your modal content here...</div>
</Modal>

🚀 Conclusion

This reusable modal in React demonstrates the power of combining Tailwind CSS, TypeScript, and responsiveness. Whether you’re looking for a React modal example, building a responsive modal in React, or creating clean, production-ready React modal components, this approach gives you complete control and reusability. For more advanced use cases, you can extend it with context, animations or integrate it with global state. Keep this React modal documentation handy — your UI just got a whole lot smoother.