If you have an item you need to fit into a shape, you can achieve this by
putting a Mask on it.

Props

Component props
Name
Type
Default
children
React.Node
-
number | string
-

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

"circle" | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
0
boolean
false
number | string
-

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

boolean
true

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.

weakendclub.com

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.

subliming.tumblr.com

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.

subliming.tumblr.com