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`
### `sizes: RectResult`
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_
### `className?: string`
[Class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) to apply to the _Mask_ wrapper
### `highlightedAreaClassName?: string`
[Class](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/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`
Click handler for the _Mask_ except the highlighted area.
### `onClickHighlighted?: MouseEventHandler`
Click handler for the _Highlighted_ area.
### `maskId?: string`
String to be assigned to the `` element, otherwise an automatic unique id is assigned.
### `clipId?: string`
String to be assigned to the `` 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
```js
const styles = {
maskWrapper: (base) => ({
...base,
color: 'red',
}),
highlightedArea: (base, { x, y }) => ({
...base,
x: x + 10,
y: y + 10,
}),
}
```