Popover props

Properties to customize Popover

`sizes`

Type: RectResult

Object containing size and position informations of where to position the Popover

RectResult

Based on getBoundingClientRect (opens in a new tab) structure

Option	Type	Description
width	number	Width of the `rect`
height	number	Height of the `rect`
top	number	Top of the `rect`
left	number	Left of the `rect`
bottom?	number	Bottom of the `rect`
right?	number	Right of the `rect`

`position`

Type: Position

The position for the Popover.

Position

PositionProps

Option	Type	Description
bottom	number
height	number
left	number
right	number
top	number
width	number
windowWidth	number
windowHeight	number

`padding?`

Type: number | number[]

Extra space to add in Popover calculations. Useful when calculating space from Element bounding rect and want to add more space.

Sapce calculation

Calculation is based on padding shorthand syntax (opens in a new tab)

Option	Type	Description
value	number	Apply to all four sides`
[x, y]	number[]	top and bottom \| left and right
[top, x, bottom]	number[]	top \| left and right \| bottom
[top, right, bottom, left]	number[]	top \| right \| bottom \| left

`className?`

Type: string

CSS classname (opens in a new tab) to apply to the Popover

`refresher?`

Type: any

Any value that if changed, updates rect calculations

`styles?`

Type: StylesObj

Prop to customize styles for the different parts of the Popover using a function that allows to extend the base styles an take advantage of some state props.

StylesObj

Styles keys and its props available to customize

Option	Type	Description
popover	position, verticalAlign, horizontalAlign, helperRect, targetRect

Example

const styles = {
  popover: (base, { position }) => ({
    ...base,
    boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',
    backgroundColor: position === 'top' ? 'red' : '#dedede',
  }),
}
 
function App() {
  return <Popover styles={styles} />
}

Installation & Usage Installation & Usage