AspectRatioBox

There are times when it comes in handy to build a box with a specific aspect ratio, given a certain width. This utility component applies CSS to ::before and ::after pseudo-elements in order to achieve set aspect ratios. (See CSS-Tricks for why this works.)

Note: AspectRatioBox and AspectRatioBoxBody components are both implemented using Block, and can take all the Block properties for styling.

Basic usage

Square by default
16:9 aspect ratio

It can be useful to wrap an image component in an AspectRatioBox, so content does not reflow as the image loads. This is useful when building UIs for mobile devices, to avoid content moving around as images load on poor network connections.

Image in an AspectRatioBox

You could even build a calendar of square buttons with it, that resizes with the window width!

Full-width calendar

AspectRatioBox API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

AspectRatioBoxBody API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>