Components

Component

AspectRatio

Intrinsic-ratio media and preview container.

ReactReact Native6 props
PreviewReact

16 / 9 media frame

Imports

import { AspectRatio } from "@hozorica/hods-react";
import { AspectRatio } from "@hozorica/hods-react-native";

Props

PropTypeDescription
rationumberWidth divided by height. Defaults to 1.
widthDimensionToken | number | stringSet width and let height be derived from ratio.
bg / backgroundColorTokenSemantic background color token inherited from Box.
borderRadiusRadiusToken | 0Corner radius token inherited from Box.
overflowhidden | auto | visible | scrollDefaults to hidden for media clipping.
as / asChildElementType / booleanWeb-only polymorphism inherited from Box.

Platform Support

React

Uses the CSS aspect-ratio property and inherits Box token props.

React Native

Uses React Native aspectRatio style and inherits Box token props.

Usage

<AspectRatio ratio={16 / 9} width="full" bg="bg.neutralWeak" borderRadius="r2"><img src="..." alt="" /></AspectRatio>

Notes

  • Set width on the AspectRatio or its parent; height is calculated from ratio.
  • Use ratio={1} for square, ratio={4 / 3} for photo previews, and ratio={16 / 9} for video.
  • RN does not support as/asChild, but ratio and token layout props are shared.