Popover
Popover props

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

OptionTypeDescription
widthnumberWidth of the `rect`
heightnumberHeight of the `rect`
topnumberTop of the `rect`
leftnumberLeft of the `rect`
bottom?numberBottom of the `rect`
right?numberRight of the `rect`

position

Type: Position

The position for the Popover.

Position

Type: 'top' | 'right' | 'bottom' | 'left' | 'center' | [number, number] | ((postionsProps: PositionProps, prevRect: RectResult) => Position)

PositionProps
OptionTypeDescription
bottomnumber
heightnumber
leftnumber
rightnumber
topnumber
widthnumber
windowWidthnumber
windowHeightnumber

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)

OptionTypeDescription
valuenumberApply 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

OptionTypeDescription
popoverposition, 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} />
}