Positioner

Utility component to help with positioning an element to an anchor.

Positioner is used throughout Wave in components such as Tooltip, Popover or Menu.

Import#

import { Positioner, Placement } from '@volue/wave-react';

// you may also access Positioner's context via hook:
// import { usePositionerContext } from '@volue/wave-react';

Positioner is a compound component that consists of multiple parts:

Positioner: The wrapper that contains all the parts of a positioner and provides context for its children.
Positioner.Anchor: The reference component, the Positioner.Box should be anchored to.
Positioner.Box: The box that positions its content dynamically relative to Positioner.Anchor.
Positioner.Content: The content that pops out when the positioner is open.

Examples#

Basic#

Anchoring to any coordinates#

Positioner.Box can be anchored relative to something that isn't a DOM node, such as mouse position. This is achieved by passing virtualRef property to Positioner.Anchor.

Read more about the concept of virtualRef at https://floating-ui.com/docs/virtual-elements.

In the example below, the box is located at the coordinates of a right-click.

API Reference#

Positioner#

Prop	Type	Default
`children`	`React.ReactNode`	No default value

Positioner.Anchor#

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value
`virtualRef`	`React.RefObject<Measurable>`	No default value

Positioner.Box#

Prop	Type	Default
`isOpen`*	`boolean`	`false`
`placement`	`enum`	`"bottom_left"`
`anchorOffset`	`number`	`8`
`overflowPadding`	`number`	`8`
`onExitComplete`	`function`	`() => void`
`css`	`StitchesCss`	No default value

Positioner.Content#

Positioner.Content uses Motion Box under the hood.

Prop	Type	Default
`as`	`enum`	`div`
`css`	`StitchesCss`	No default value