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

Documentation

https://docs.react.tours/mask

Install

``zsh
npm i -S @reactour/mask


or


yarn add @reactour/mask
`

Usage

`js
import { Mask } from '@reactour/mask'

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

return (
<>
{/ ... /}


)
}
`

Mask

$3

Type details

`ts
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_

$3

Class to apply to the _Mask_ wrapper

$3

Class to apply to the _Highlighted_ area rect

$3

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

$3

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

$3

Click handler for the _Mask_ except the highlighted area.

$3

Click handler for the _Highlighted_ area.

$3

String to be assigned to the element, otherwise an automatic unique id is assigned.

$3

String to be assigned to the element, otherwise an automatic unique id is assigned.

$3

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

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