Collapse

Expandable/collapsible content panel with animated height transition. Uses Framer Motion AnimatePresence for smooth open/close.

Import

import { Collapse } from 'reablocks';

Collapse Props

Basic Usage

const [expanded, setExpanded] = useState(false);

<Button onClick={() => setExpanded(!expanded)}>Toggle</Button>
<Collapse expanded={expanded}>
  <p>Collapsible content here</p>
</Collapse>

With Render Function

<Collapse expanded={expanded}>
  {() => <ExpensiveComponent />}
</Collapse>

Content is only rendered when expanded (unmounted when collapsed via AnimatePresence).

Default animation: opacity 0→1 + height 0→auto with 0.5s ease transition.

CollapseTheme Interface

interface CollapseTheme {
  base: string;  // Container (will-change-[height,opacity], overflow-hidden)
}