Components

Component

ImageFrame

Token-styled image surface with ratio, fallback, and loading state.

ReactReact Native5 props
PreviewReact

Preview image

Imports

import { ImageFrame } from "@hozorica/hods-react/image-frame";
import { ImageFrame } from "@hozorica/hods-react-native/image-frame";

Props

PropTypeDescription
src / altstringImage source and accessible description.
rationumberWidth divided by height. Defaults to 1.
fitcover | containObject fit / resize mode.
fallbackReactNodeRendered when src is absent.
loadingbooleanShows the loading skeleton.

Platform Support

React

AspectRatio-backed image frame with cover/contain fit and Skeleton loading state.

React Native

Image-backed ratio frame with matching fit, fallback, and loading props.

Usage

<ImageFrame src="/cover.jpg" alt="Cover" ratio={16 / 9} />

Notes

  • Use ratio to reserve layout before media loads.
  • Do not omit alt when the image conveys content.