A popover positioned based on certain values

Documentation

https://docs.react.tours/popover

Install

``zsh
npm i -S @reactour/popover


or


yarn add @reacmask/popover
`

Usage

`js
import { Popover } from '@reactour/popover'

function App() {
const sizes = {
bottom: 0,
left: 0,
}

return (
<>
{/ ... /}


)
}
`

Popover

$3

Type details

`ts
type RectResult = {
width?: number
height?: number
top?: number
left?: number
bottom?: number
right?: number
}
`

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

$3

Type details

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

type PositionProps = {
bottom: number
height: number
left: number
right: number
top: number
width: number
windowWidth: number
windowHeight: number
}
`

The position for the _Popover_, fixed in case of [number, number], calculated prefered position in case of string

$3

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

Single number sets same space for all sides, otherwise an Array sets [x, y] or [top, x, bottom] or [top, right, bottom, left].

$3

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

$3

Class to apply to the _Popover_

#### Style keys and props available

| key | props |
| --------- | -------------------------------------------------------------------------- |
| popover | position, verticalAlign, horizontalAlign, helperRect, targetRect |

$3

Any value that if changed, updates rect calculations

#### Example

`js
const styles = {
popover: (base) => ({
...base,
boxShadow: '0 0 3em rgba(0, 0, 0, 0.5)',
backgroundColor: '#dedede',
}),
}
``