react-aria-modal demo

Return to the repository

When a modal is active, you should notice the following:

demo one

This modal

demo two

This modal

demo three

This modal

demo four

This modal's active/inactive state is controlled with the mounted prop instead of mounting and unmounting.

demo five

This modal uses some custom classes and special onEnter and onExit functions to enable nice transitions.

demo six

This modal renders into a specified element instead of into a new one at the bottom of <body>, uses the underlayStyle prop to customize the underlay, and underlayProps to pass additional attributes.

demo seven

This modal renders with no default styles via includeDefaultStyles=false, allowing complete presentational control without `underlayStyle` or `dialogStyle` overrides. Demo includes styles to allow for an auto-overflowing modal with a sticky footer.

demo eight

This modal has a focus trap inside it, so must pause the modal's focus trap.

demo nine

This modal has doesn't prevent the scrolling of the content behind the modal.

demo ten

This modal will not return focus to the element that was focused just before the modal activated.

Return to the repository