Build a Reusable, Flexible Modal Component in React with Portal Support

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>

🔚 Final Thoughts
Modals are everywhere — from e-commerce to admin dashboards. But building them to be smooth, responsive, and reusable is often overlooked.

This Modal component gives you that flexibility out of the box, plus portal rendering and optional router integration. Add it to your component library and speed up your future builds.

JAKER HOSSAIN @jackfd120

Build a Reusable, Flexible Modal Component in React with Portal Support

Comments 1 total