import { OverlayProvider } from '@uhg-abyss/web/ui/OverlayProvider';

Usage

Applications must be wrapped in an OverlayProvider so that it can be hidden from screen readers when an overlay opens.

<OverlayProvider>
  <App>{children}</App>
</OverlayProvider>

Examples

OverlayProvider is used to support components such as ModalDialog and Drawer. Use the useOverlay hook to support state management of the overlay.

ModalDialog

Drawer

Handling browser navigation

When users navigate through browser history using the back button, you may want open overlays to automatically close. This can be enabled with the closeOnPopState prop:

<OverlayProvider closeOnPopState>
  <App>{children}</App>
</OverlayProvider>

This improves user experience by:

• Preventing overlays from remaining open after users navigate back
• Reducing the need for manual cleanup of overlay state

Name	Type	Default	Required	Description
children	string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined			The children to render within the overlay provider
closeOnPopState	boolean | undefined	false		Controls whether overlays should automatically close when the active history entry changes