@reactour/popover

A popover positioned based on certain values

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

Type details

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

Type details

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

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',
  }),
}