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' |
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<HTMLElement> | — | The ref for the element which the overlay positions itself with respect to. |
overlayRef | RefObject<HTMLElement> | — | The ref for the overlay element. |
boundaryElement | HTMLElement | document.body | Element that that serves as the positioning boundary. |
scrollRef | RefObject<HTMLElement> | overlayRef | A ref for the scrollable region within the overlay. |
shouldUpdatePosition | boolean | true | Whether the overlay should update its position automatically. |
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 | HTMLAttributes<Element> | Props for the overlay container element. |
arrowProps | HTMLAttributes<Element> | 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. |
Axis | 'center'
'top'
| 'bottom'
| 'left'
| 'right'