useOverlayPosition

Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes.

install	`yarn add react-aria`
version	3.20.0
usage	`import {useOverlayPosition} from 'react-aria'`

View repository

GitHub

View package

NPM

API#

useOverlayPosition(
  (props: AriaPositionProps
)): PositionAria

Example#

See useOverlayTrigger for an example of using useOverlayPosition to position a popover relative to its trigger button.

Name	Type	Default	Description
`targetRef`	`RefObject<Element>`	—	The ref for the element which the overlay positions itself with respect to.
`overlayRef`	`RefObject<Element>`	—	The ref for the overlay element.
`boundaryElement`	`Element`	`document.body`	Element that that serves as the positioning boundary.
`scrollRef`	`RefObject<Element>`	`overlayRef`	A ref for the scrollable region within the overlay.
`shouldUpdatePosition`	`boolean`	`true`	Whether the overlay should update its position automatically.
`onClose`	`() => void`	—	Handler that is called when the overlay should close.
`maxHeight`	`number`	—	The maxHeight specified for the overlay element. By default, it will take all space up to the current viewport height.
`placement`	`Placement`	`'bottom'`	The placement of the element with respect to its anchor element.
`containerPadding`	`number`	`12`	The placement padding that should be applied between the element and its surrounding container.
`offset`	`number`	`0`	The additional offset applied along the main axis between the element and its anchor element.
`crossOffset`	`number`	`0`	The additional offset applied along the cross axis between the element and its anchor element.
`shouldFlip`	`boolean`	`true`	Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.
`isOpen`	`boolean`	—	Whether the element is rendered.

'bottom'
  | 'bottom left'
  | 'bottom right'
  | 'bottom start'
  | 'bottom end'
  | 'top'
  | 'top left'
  | 'top right'
  | 'top start'
  | 'top end'
  | 'left'
  | 'left top'
  | 'left bottom'
  | 'start'
  | 'start top'
  | 'start bottom'
  | 'right'
  | 'right top'
  | 'right bottom'
  | 'end'
  | 'end top'
  | 'end bottom'

Properties

Name	Type	Description
`overlayProps`	`DOMAttributes`	Props for the overlay container element.
`arrowProps`	`DOMAttributes`	Props for the overlay tip arrow if any.
`placement`	`PlacementAxis`	Placement of the overlay with respect to the overlay trigger.

Methods

Method	Description
`updatePosition(): void`	Updates the position of the overlay.

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`

Axis | 'center'

'top'
  | 'bottom'
  | 'left'
  | 'right'