Nested Modals

Nested modals allow you to open modals inside other modals. This creates a chain where each modal can have one nested child, which can have its own nested child, and so on.

Use the open prop to open a modal inside the current modal. It works exactly like modals.open but ensures the nested modal is rendered as a child in the DOM.


import { ModalProps } from "react-easy-modals";
 
function ParentModal({ close, open, nested }: ModalProps) {
  const handleOpen = async () => {
    const result = await open(ChildModal, { title: "Nested!" });
    console.log("Nested modal returned:", result);
  };
 
  return (
    <div className="modal">
      <h2>Parent Modal</h2>
      <button onClick={handleOpen}>Open Nested</button>
      <button onClick={() => close()}>Close</button>
      {nested}
    </div>
  );
}

[]

The nested Prop

When a nested modal is opened, it is passed to the parent modal via the nested prop. You must render {nested} in your modal component to display nested modals.


function ParentModal({ close, open, nested }: ModalProps) {
  return (
    <div className="modal">
      <h2>Parent Modal</h2>
      <button onClick={() => open(ChildModal)}>Open Nested</button>
      {nested} {/* Nested modal renders here */}
    </div>
  );
}

The isNested Prop

Each modal receives an isNested boolean prop that indicates whether it’s a nested modal or a root modal.


function MyModal({ isNested, close }: ModalProps) {
  return (
    <div className="modal">
      {isNested ? "I'm nested!" : "I'm the root modal"}
      <button onClick={() => close()}>Close</button>
    </div>
  );
}

Chain Model

Nested modals follow a chain model: each modal can have at most one direct nested child. When you call open from a nested modal, it adds another level to the chain.


Root Modal
└── Nested Level 1
    └── Nested Level 2
        └── Nested Level 3

Closing Nested Modals

Each modal closes itself with its own close function. Closing the parent will also close all nested modals.

Nested Modals

Opening a Nested Modal

The nested Prop

The isNested Prop

Chain Model

Closing Nested Modals