JSPM

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

wrapperPadding?: number | [number, number]

Extra space to add between viewport with and height.

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.

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

Example

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