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) => 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, number]

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

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

Example

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