Skip to content
Sancho UI
Toggle dark mode
Getting started
Components
Helpers
Built with ☕ by
Ben McMahen

Positioner

Position an element around another one. This component uses react-popper to determine positions.

Basic usage

Target
<React.Fragment>
  <Positioner
    isOpen={true}
    placement="right"
    target={({ ref }) => <Button ref={ref}>Target</Button>}
  >
    {({ placement, ref, arrowProps, style }, animation) => (
      <Layer
        ref={ref}
        data-placement={placement}
        style={{
          ...style,
          padding: "1rem"
        }}
      >
        <Text>Put me in my place</Text>
      </Layer>
    )}
  </Positioner>
</React.Fragment>

API

Positioner
isOpenboolean
Whether the item being positioned is visible
placementPlacements
The placement of children
positionFixedboolean
Use fixed positioning
target*(props: ReferenceChildrenProps) => ReactNode
The element our positioner is targetting (eg, Button)
children*((props: PopperChildrenProps, state: { [x: string]: SpringValue<any>; opacity: SpringValue<number>; }) => ReactNode) | (((props: PopperChildrenProps, state: { [x: string]: SpringValue<any>; opacity: SpringValue<...>; }) => ReactNode) & string) | ... 5 more ... | (((props: PopperChildrenProps, state: { ...; }) => Rea...
The render callback which contains positioning and animation info