@radix-ui/react-aspect-ratio

What is @radix-ui/react-aspect-ratio?

@radix-ui/react-aspect-ratio is a React component library that provides a way to maintain a consistent aspect ratio for an element. This is particularly useful for responsive design, ensuring that elements like images, videos, and other media maintain their proportions across different screen sizes.

What are @radix-ui/react-aspect-ratio's main functionalities?

Basic Aspect Ratio

This feature allows you to wrap any element with the AspectRatio component to maintain a 16:9 aspect ratio. The child element will scale to fit the specified ratio.

import { AspectRatio } from '@radix-ui/react-aspect-ratio';

function App() {
  return (
    <AspectRatio ratio={16 / 9}>
      <img src="https://via.placeholder.com/800x450" alt="Example" />
    </AspectRatio>
  );
}

Custom Aspect Ratio

This feature allows you to specify a custom aspect ratio, such as 4:3, for any element. The child element will adjust its size to maintain the specified ratio.

import { AspectRatio } from '@radix-ui/react-aspect-ratio';

function App() {
  return (
    <AspectRatio ratio={4 / 3}>
      <div style={{ background: 'lightblue', width: '100%', height: '100%' }}>Custom Aspect Ratio</div>
    </AspectRatio>
  );
}

Responsive Aspect Ratio

This feature demonstrates how the AspectRatio component can be used within a responsive container. The aspect ratio is maintained even as the container resizes.

import { AspectRatio } from '@radix-ui/react-aspect-ratio';

function App() {
  return (
    <div style={{ width: '50%' }}>
      <AspectRatio ratio={1}>
        <div style={{ background: 'lightcoral', width: '100%', height: '100%' }}>Responsive Aspect Ratio</div>
      </AspectRatio>
    </div>
  );
}

Other packages similar to @radix-ui/react-aspect-ratio

react-aspect-ratio

react-aspect-ratio is another package that allows you to maintain aspect ratios for elements. It is straightforward to use but may lack some of the advanced features and flexibility provided by @radix-ui/react-aspect-ratio.

react-container-query

react-container-query allows you to apply styles based on the size of a container, which can be used to maintain aspect ratios indirectly. It offers more general functionality for responsive design but requires more setup compared to @radix-ui/react-aspect-ratio.

README

react-aspect-ratio

Installation

$ yarn add @radix-ui/react-aspect-ratio
# or
$ npm install @radix-ui/react-aspect-ratio

Usage

View docs here.