mask

An SVG mask that cover all the window contents except the one specified by certain position and sizes values

Install

npm i -S @reactour/mask
# or
yarn add @reactour/mask

Usage

import { Mask } from '@reactour/mask'

function App() {
  const sizes = {
    width: 100,
    height: 100,
    top: 100,
    left: 100,
  }

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

Mask

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 Mask

className?: string

Class to apply to the Mask wrapper

highlightedAreaClassName?: string

Class to apply to the Highlighted area rect

padding?: number | [number, number]

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

Single number sets sema space for x and y, otherwise, an Array sets [x, y].

onClick?: MouseEventHandler<HTMLDivElement>

Click handler for the Mask except the highlighted area.

onClickHighlighted?: MouseEventHandler<SVGRectElement>

Click handler for the Highlighted area.

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.

Style keys and props available

key	props
maskArea	x, y, width, height
maskRect	windowWidth, windowHeight, maskID
clickArea	windowWidth, windowHeight, top, left, width, height
highlightedArea	x, y, width, height

Example

const styles = {
  maskWrapper: base => ({
    ...base,
    color: 'red',
  }),
  highlightedArea: (base, { x, y }) => ({
    ...base,
    x: x + 10,
    y: y + 10,
  }),
}