#Modal

Using v1? Migrate to v2 now, it's easy!

This package makes it incredibly easy to create highly customized modals from anywhere in your app. Every modal comes with built-in transitions, allowing you to easily build unique open and close effects. You can also open modals using the URL or your existing router, enabling direct links to modal content. All modals are fully accessible out-of-the-box. They trap focus, bind escape, and so much more.

Some common uses for this package include:

• Lightboxes
• Drawers
• Mega menus
• Drilldown menus
• Search menus
• Dialogues

#How it works

Each modal is a wrapper around React Portal. This means that you can render a <Modal> from anywhere in your app and it will be portaled into the <ModalContainer>. This lifts them out of their current stacking context and makes it possible to apply fullscreen transitions. The modal container can also be used to standardize transitions.

Now each modal can be independently controlled in a number of ways. Most commonly you will render a <ModalToggler> component, but you could also use methods on the useModal hook or even the URL. When a modal is opened, transition events are fired using React Transition Group. These transitions can be styled using CSS classes or any of the transition event callbacks, see Transitions for full details.

The final piece to this is the <ModalProvider> which should wrap your entire app and where you define the global settings. This provides the modal context for all the components and hooks to work together. If you need more granular control, there are more advanced ways to set up and interact with modals. See the API for full details.

#Key features

• React Portal
• Transitions
• Routing
• Focus Trapping
• Escape binding
• Blur handling
• ARIA accessible
• Typed