useAutoHeight
Container height measurement via ResizeObserver and requestAnimationFrame for smooth CSS transitions.
2.5 KB
•Updated on September 3, 2026
Example 2: FAQ Accordion Collapse
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-animation-use-auto-heightUsage
Code
import * as React from 'react'
import { useAutoHeight } from '@/hooks/use-auto-height'
export default function SpaceUI({ items }: { items: React.ReactNode }) {
const { ref, height } = useAutoHeight([items])
return (
<div style={{ height }}>
<div ref={ref}>{items}</div>
</div>
)
}API Reference
Parameters / Props
| Parameter | Type | Default | Description |
|---|---|---|---|
deps | DependencyList | [] | Dependency list. |
Return Value
| Property | Type | Description |
|---|---|---|
ref | RefObject<HTMLElement> | Inner measurable ref. |
height | number | Calculated height in px. |