useOverlay

Provides the behavior for overlays such as dialogs, popovers, and menus. Handles hiding the overlay when the user interacts outside it (if `isDismissible`), when the Escape key is pressed, or optionally, on blur. Handles multiple overlays open at once as a stack: only the top-most overlay will close at once.

install	`yarn add @react-aria/overlays`
version	3.0.0
usage	`import {useOverlay} from '@react-aria/overlays'`

View repository

GitHub

View package

NPM

API#

useOverlay(
  (props: OverlayProps,
  , ref: RefObject<HTMLElement>
)): OverlayAria

Example#

See useDialog and useOverlayTrigger for examples of using useOverlay to provide common overlay behavior to a component.

Name	Type	Default	Description
`isOpen`	`boolean`	—	Whether the overlay is currently open.
`onClose`	`() => void`	—	Handler that is called when the overlay should close.
`isDismissable`	`boolean`	`false`	Whether to close the overlay when the user interacts outside it.
`shouldCloseOnBlur`	`boolean`	—	Whether the overlay should close when focus is lost or moves outside it.

Name	Type	Description
`overlayProps`	`HTMLAttributes<HTMLElement>`	Props to apply to the overlay container element