Component-Specific
useAspectRatio
Calculate and maintain aspect ratios for responsive media containers.
import { useAspectRatio } from "saha-ui"Uses
Calculate aspect ratio padding, provide a content ref and optional hover-zoom handlers for responsive media containers.
Props
| Name | Type | Description | Default |
|---|---|---|---|
| ratio | preset key or 'custom' | Common presets like "16/9", "4/3", "1/1". | "16/9" |
| customRatio | number | string | Use when `ratio` is "custom"; accepts numbers or strings like "16:9". | - |
| zoomOnHover | boolean | Enable zoom-on-hover behavior. | false |
| zoomScale | number | Zoom scale between 1.0 and 2.0. | 1.1 |
Returns
| Name | Description |
|---|---|
| ratioValue | Numeric ratio used for calculations. |
| paddingBottom | CSS padding-bottom percentage for aspect box. |
| safeZoomScale | Clamped zoom factor. |
| contentRef | Ref for the content wrapper element. |
| handleMouseEnter/handleMouseLeave | Hover handlers when zoom enabled. |
Example
const { paddingBottom, contentRef, handleMouseEnter } = useAspectRatio({ ratio: '16/9', zoomOnHover: true, zoomScale: 1.2 });Notes
Padding-bottom uses the reciprocal of the ratio. Supports preset and custom ratios parsed from strings like "16:9".