A modal stack
A new modal hides the one below it until it closes.
open modals: 0React Easy Modals
Modals you can await.
A headless, zero-dependency modal stack for React. Open a modal like you call a function, and get its answer back.
Start with Getting started, or read the source on GitHub (opens in a new tab) and the package on npm (opens in a new tab).
Run it: the modal opens, and the promise waits for its answer.
Get started
Install. One package, no dependencies besides React.
Add the provider. It renders the stack at the root of your app.
Open a modal. Any component works. Its close value is the result.
Features
Nested modals
Open a modal inside a modal, and close any level of the chain.
Close guards
Keep a modal open until the user is ready to leave.
Exit animations
Play the exit animation first, then unmount.
promises resolved after the animation: 0Lazy loading
Load a modal’s code only when it opens.
shadcn/ui
Add a Modal built on your Dialog. The registry serves the Radix or Base UI version to match the style in your components.json.
Docs
- Getting Started
Install react-easy-modals, add the provider and open your first modal.
- How It Works
The modal stack, opening and closing modals, and the props each modal receives.
- Props
The props every modal component receives.
- Transitions
Animate a modal out before it unmounts with useBeforeClose.
- Lazy Loading
Load modal components on demand with dynamic imports.
- Nested Modals
Open modals inside other modals and close any level of the chain.
- Registry
A ready-made shadcn/ui Modal built on Dialog, for Radix or Base UI.
- ModalProvider
The provider that renders the modal stack, its backdrop and its loading state.
- useModals
Open and close modals, and read the current stack.
- useModal
Read the current modal's props from any child component.
- useModalAt
Reach a parent or the root modal from inside a nested modal.
- useBeforeClose
Block or delay a modal's close, for confirmations and exit animations.