Mask props
Properties to customize Mask
sizes
Type: RectResult
Object containing size and position informations of where to position the Mask
RectResult
Based on getBoundingClientRect (opens in a new tab) structure
| Option | Type | Description |
|---|---|---|
| width | number | Width of the `rect` |
| height | number | Height of the `rect` |
| top | number | Top of the `rect` |
| left | number | Left of the `rect` |
| bottom? | number | Bottom of the `rect` |
| right? | number | Right of the `rect` |
className?
Type: string
CSS classname (opens in a new tab) to apply to the Mask wrapper
highlightedAreaClassName?
Type: string
CSS classname (opens in a new tab) to apply to the Highlighted area rect element
padding?
Type: number | number[]
Extra space to add in Mask calculations. Useful when calculating space from Element bounding rect and want to add more space.
wrapperPadding?
Type: number | number[]
Extra space to add between viewport with and height.
Sapce calculation
Calculation is based on padding shorthand syntax (opens in a new tab)
| Option | Type | Description |
|---|---|---|
| value | number | Apply to all four sides` |
| [x, y] | number[] | top and bottom | left and right |
| [top, x, bottom] | number[] | top | left and right | bottom |
| [top, right, bottom, left] | number[] | top | right | bottom | left |
onClick?
Type: MouseEventHandler<HTMLDivElement>
Click handler for the Mask except the highlighted area.
onClickHighlighted?
Type: MouseEventHandler<SVGRectElement>
Click handler for the Highlighted area.
maskId?
Type: string
String to be assigned to the <mask /> element, otherwise an automatic unique id is assigned.
clipId?
Type: string
String to be assigned to the <clipPath /> element, otherwise an automatic unique id is assigned.
styles?
Type: 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.
StylesObj
Styles keys and its props available to customize
| Option | Type | Description |
|---|---|---|
| maskWrapper | ||
| maskArea | x, y, width, height | |
| maskRect | windowWidth, windowHeight, maskID | |
| clickArea | windowWidth, windowHeight, maskID | |
| highlightedArea? | x, y, width, height |
Example
const styles = {
maskWrapper: (base) => ({
...base,
color: "red",
}),
highlightedArea: (base, { x, y }) => ({
...base,
x: x + 10,
y: y + 10,
}),
};
function App() {
return <Mask styles={styles} />;
}