React Animate Height

React Animate Height is a lightweight, dependency-free React component for animating an element’s height using native CSS transitions rather than JavaScript-driven layout calculations on every frame. Passing a new height prop — a pixel value, percentage, or 'auto' — smoothly slides the content open or closed.

The component ships as React hooks (v3+, requiring React 16.8+), supports optional content opacity animation, applies CSS classes for each animation state for custom styling, and automatically respects the user’s prefers-reduced-motion setting.

What You Get

• A single <AnimateHeight> component that animates to any pixel value, percentage, or 'auto' height
• Optional simultaneous opacity animation via the animateOpacity prop
• Per-animation-state CSS class hooks (animating, animatingUp, staticHeightZero, etc.) for custom styling
• onHeightAnimationStart/onHeightAnimationEnd callbacks reporting the target pixel height
• Automatic prefers-reduced-motion support and accessible aria-hidden/aria-expanded handling out of the box

Common Use Cases

• Building accordion or FAQ components that expand and collapse smoothly
• Animating a collapsible sidebar or filter panel to its content’s natural height
• Sliding a notification, alert, or details panel open and closed without hard-coding max-height values
• Combining with a ResizeObserver to auto-animate height as dynamic content changes

Under The Hood

Architecture: the entire component lives in a single ~400-line src/index.tsx file implementing AnimateHeight as a function component built on hooks (useState, useEffect, useRef) rather than the class-based implementation used in its pre-v3 releases. Internally it measures the content wrapper’s scrollHeight, sets inline height/transition styles for the animation duration, and swaps overflow/display at the boundaries so height: auto and height: 0 states behave correctly once the CSS transition completes. Tech Stack: TypeScript compiled to both ESM and CJS builds via separate tsconfig files, published with dual exports map entries; the docs site is bundled separately with esbuild. The package has zero runtime dependencies. Code Quality: the project includes a test suite exercised via npm test before every publish (prepublishOnly), and the README documents each prop, accessibility behavior, and known layout gotchas (collapsing margins, bounded flexboxes) in detail, suggesting the edge cases have been encountered and fixed over time. API Design: the API surface is a single component with a small, well-named prop set (height, duration, easing, animateOpacity, animationStateClasses), a ref-forwarding pattern for both wrapper and content divs, and thorough README documentation with copy-pasteable examples — making it quick to adopt with minimal learning curve.