Mask

View source on GitHub

Mask is used to display content in a specific shape.

Props

Component props
Name
Type
Default
children
React.Node
-

The content to be masked.

height
number | string
-

Use numbers for pixels: height={100} and strings for percentages: height="100%".

rounding
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | "circle"
0

Specifies the corner radius to apply. See the Rounding example for more details.

wash
boolean
false

Applies a wash to provide contrast when the masked content is nearly white. See the Wash example for more details.

width
number | string
-

Use numbers for pixels: width={100} and strings for percentages: width="100%".

willChangeTransform
boolean
true

Mask applies the style will-change: transform by default as a performance optimization. In certain specific scenarios, this can be problematic. This prop can be used to turn off that optimization. See the willChangeTransform example for more details.

Example

Example: Masking other content

You can compose images with other content (like images or videos) to produce different shapes like rounded rectangles or circles.

Example: Adding a wash

If you expect the masked content to be nearly white, you can apply a wash to emphasize the edge of the mask.

Rounding Combinations

rounding="circle"
rounding={0}
rounding={1}
rounding={2}
rounding={3}
rounding={4}
rounding={5}
rounding={6}
rounding={7}
rounding={8}

Example: willChangeTransform

If you want to turn off the willChange:transform property for rendering reasons, you can set this to false. See MDN for more details.

Edit page on GitHub