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

OverlayProvider Props

Prop Name	Type	Default	Description
children	React.ReactNode	-	The children to render within the overlay provider
closeOnPopState	boolean	-	When true, any open overlays will automatically close on browser navigation events (like the back button)