useOverlay

Provides the behavior for overlays such as dialogs, popovers, and menus. Hides the overlay when the user interacts outside it, when the Escape key is pressed, or optionally, on blur. Only the top-most overlay will close at once.

install	`yarn add @react-aria/overlays`
version	3.1.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.