@reactour/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[]

Extra space to add in Mask 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].

wrapperPadding?: number | number[]

Extra space to add between viewport with and height.

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

onClick?: MouseEventHandler<HTMLDivElement>

Click handler for the Mask except the highlighted area.

onClickHighlighted?: MouseEventHandler<SVGRectElement>

Click handler for the Highlighted area.

maskId?: string

String to be assigned to the <mask /> element, otherwise an automatic unique id is assigned.

clipId?: string

String to be assigned to the <clipPath /> element, otherwise an automatic unique id is assigned.

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
maskWrapper
maskArea	x, y, width, height
maskRect	windowWidth, windowHeight, maskID
clickArea	windowWidth, windowHeight, clipID
highlightedArea	x, y, width, height

Example

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