AutoHeight

A wrapper component that automatically measures and animates height changes when its content updates, creating smooth expand/collapse transitions.

Import

import { AutoHeight } from '@mks2508/mks-ui/react';

Basic Usage

<AutoHeight className="border border-white/10 rounded-lg p-4">
<p className="mb-2">This content animates smoothly.</p>
<p>Add or remove content to see the height transition.</p>
</AutoHeight>

How It Works

1. AutoHeight wraps your dynamic content
2. It uses ResizeObserver internally (via useAutoHeight hook)
3. When children change size, the wrapper animates to the new height
4. The animation uses Motion for smooth spring-based transitions

With Transition

Customize the animation transition:

<AutoHeight transition={{ duration: 0.5, ease: 'easeInOut' }}>
  {/* Content with longer transition */}
</AutoHeight>

With Dependencies

Re-measure height when specific values change:

const [items, setItems] = useState([]);

<AutoHeight deps={[items.length]}>
  {items.map(item => <div key={item.id}>{item.name}</div>)}
</AutoHeight>

API Reference