Mask
Mask props

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

OptionTypeDescription
widthnumberWidth of the `rect`
heightnumberHeight of the `rect`
topnumberTop of the `rect`
leftnumberLeft of the `rect`
bottom?numberBottom of the `rect`
right?numberRight 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)

OptionTypeDescription
valuenumberApply 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

OptionTypeDescription
maskWrapper
maskAreax, y, width, height
maskRectwindowWidth, windowHeight, maskID
clickAreawindowWidth, 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} />;
}