# React Easy Modals

> A headless, zero-dependency modal stack for React. Open a modal with await modals.open() and get its answer back.

## Overview

- [Getting Started](https://react-easy-modals.alexandrejoly.me/docs/getting-started.md): Install react-easy-modals, add the provider and open your first modal.
- [How It Works](https://react-easy-modals.alexandrejoly.me/docs/how-it-works.md): The modal stack, opening and closing modals, and the props each modal receives.

## Modal Components

- [Props](https://react-easy-modals.alexandrejoly.me/docs/props.md): The props every modal component receives.
- [Transitions](https://react-easy-modals.alexandrejoly.me/docs/transitions.md): Animate a modal out before it unmounts with useBeforeClose.
- [Lazy Loading](https://react-easy-modals.alexandrejoly.me/docs/lazy-loading.md): Load modal components on demand with dynamic imports.
- [Nested Modals](https://react-easy-modals.alexandrejoly.me/docs/nested.md): Open modals inside other modals and close any level of the chain.
- [Registry](https://react-easy-modals.alexandrejoly.me/docs/registry.md): A ready-made shadcn/ui Modal built on Dialog, for Radix or Base UI.

## API

- [ModalProvider](https://react-easy-modals.alexandrejoly.me/docs/modal-provider.md): The provider that renders the modal stack, its backdrop and its loading state.
- [useModals](https://react-easy-modals.alexandrejoly.me/docs/use-modals.md): Open and close modals, and read the current stack.
- [useModal](https://react-easy-modals.alexandrejoly.me/docs/use-modal.md): Read the current modal's props from any child component.
- [useModalAt](https://react-easy-modals.alexandrejoly.me/docs/use-modal-at.md): Reach a parent or the root modal from inside a nested modal.
- [useBeforeClose](https://react-easy-modals.alexandrejoly.me/docs/use-before-close.md): Block or delay a modal's close, for confirmations and exit animations.

## Optional

- [Full documentation](https://react-easy-modals.alexandrejoly.me/llms-full.txt)