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/overlays`
version	3.0.0
usage	`import {useOverlayPosition} from '@react-aria/overlays'`

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	Description
`targetRef`	`RefObject<HTMLElement>`
`overlayRef`	`RefObject<HTMLElement>`
`scrollRef`	`RefObject<HTMLElement>`
`shouldUpdatePosition`	`boolean`
`placement`	`Placement`
`containerPadding`	`number`
`offset`	`number`
`crossOffset`	`number`
`shouldFlip`	`boolean`
`boundaryElement`	`HTMLElement`
`isOpen`	`boolean`

'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'

Name	Type	Description
`overlayProps`	`HTMLAttributes<Element>`
`arrowProps`	`HTMLAttributes<Element>`
`placement`	`PlacementAxis`

Method	Description
`updatePosition(): void`

Axis | 'center'

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

useOverlayPosition

API#

Example#

Properties

Methods