A popover positioned based on certain values

Documentation

https://docs.react.tours/popover

Install

npm i -S @reactour/popover
# or
yarn add @reacmask/popover

Usage

import { Popover } from '@reactour/popover'

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

  return (
    <>
      {/* ... */}
      <Popover sizes={sizes}>
    </>
  )
}

`Popover`

`sizes: RectResult`

<summary>Type details</summary>

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

`position?: Position`

<summary>Type details</summary>

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

`padding?: number | number[]`

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].

`styles?: StylesObj`

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.

`className?: string`

Class to apply to the Popover

Style keys and props available

key	props
`popover`	`position`, `verticalAlign`, `horizontalAlign`, `helperRect`, `targetRect`

`refresher?: any`

Any value that if changed, updates rect calculations

Example

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

Detalhes do pacote

@reactour/popover

readme (leia-me)