import { useOverlay } from '@uhg-abyss/web/hooks/useOverlay';

Usage

Use the useOverlay hook to handle the state of any overlay like ModalDialog and Drawer. Each overlay must have a unique model value to identify it, which must also be passed to the useOverlay hook.

useOverlay returns an object with the following methods:

• open(data?: any): Opens the overlay. You can pass data to be injected into the overlay state.
• close(data?: any): Closes the overlay. You can pass data to be injected into the overlay state.
• toggle(data?: any): Toggles the overlay. You can pass data to be injected into the overlay state.
• getState(): Returns the current state of the overlay.

TypeScript users can provide a type for the state data to the useOverlay hook like so:

interface ModalData {
  firstName: string;
  lastName: string;
}

const modal = useOverlay<ModalData>('data-modal');

modal.open({ firstName: 'John', lastName: 'Doe' }); // data parameter is now typed as ModalData

OverlayProvider

Applications must be wrapped in an OverlayProvider in order to use useOverlay.

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