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`
version	3.20.0
usage	`import {useOverlay} from 'react-aria'`

View repository

GitHub

View package

NPM

API#

useOverlay(
  (props: AriaOverlayProps,
  , ref: RefObject<Element>
)): 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.
`isKeyboardDismissDisabled`	`boolean`	`false`	Whether pressing the escape key to close the overlay should be disabled.
`shouldCloseOnInteractOutside`	`( (element: Element )) => boolean`	—	When user interacts with the argument element outside of the overlay ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, onClose will always be called on interaction outside the overlay ref.

Name	Type	Description
`overlayProps`	`DOMAttributes`	Props to apply to the overlay container element.
`underlayProps`	`DOMAttributes`	Props to apply to the underlay element, if any.

All DOM attributes supported across both HTML and SVG elements.

Name	Type	Description
`id`	`string \| undefined`
`role`	`AriaRole \| undefined`
`tabIndex`	`number \| undefined`
`style`	`CSSProperties \| undefined`
`className`	`string \| undefined`