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