{"id":11645,"library":"react-animate-height","title":"React Animate Height","description":"React Animate Height is a lightweight, dependency-free (beyond React itself) component designed for animating the height of elements using CSS transitions. It enables developers to smoothly slide elements up to `0`, down to `auto`, or to any specific pixel or percentage height. The current stable version is 3.2.3, which is built with React Hooks, requiring React 16.8 or newer. The library appears to be actively maintained, with 'Version 3' indicating significant updates and ongoing support. A key differentiator is its focused approach to height animation, offering optional opacity transitions and control over CSS classes at various animation states, without the overhead of a full-fledged animation library. It is often chosen for its simplicity and direct control over height transitions in React applications, especially when `auto` height animation is required, which can be complex with pure CSS.","status":"active","version":"3.2.3","language":"javascript","source_language":"en","source_url":"https://github.com/Stanko/react-animate-height","tags":["javascript","react","react-component","slide","slide up","slide down","animate height","typescript"],"install":[{"cmd":"npm install react-animate-height","lang":"bash","label":"npm"},{"cmd":"yarn add react-animate-height","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-animate-height","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for React functionality, especially Hooks since v3.","package":"react","optional":false},{"reason":"Peer dependency, required for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"AnimateHeight is the default export of the package. Using named import or CommonJS require in modern ES module environments is incorrect.","wrong":"import { AnimateHeight } from 'react-animate-height';\nconst AnimateHeight = require('react-animate-height');","symbol":"AnimateHeight","correct":"import AnimateHeight from 'react-animate-height';"},{"note":"Type import for the 'height' prop, useful for explicit TypeScript typing.","symbol":"Height","correct":"import type { Height } from 'react-animate-height';"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport AnimateHeight from 'react-animate-height';\n\nconst HeightAnimationExample = () => {\n const [height, setHeight] = useState(0);\n\n const toggleHeight = () => {\n setHeight(height === 0 ? 'auto' : 0);\n };\n\n return (\n
\n \n {height === 0 ? 'Expand Content' : 'Collapse Content'}\n \n\n \n
\n

Animated Content Area

\n

This content will smoothly animate its height when expanded or collapsed.

\n

It can contain any arbitrary React elements or plain HTML.

\n
    \n
  • Item 1
    • \n
  • Item 2
    • \n
  • Item 3
    • \n
\n

The animation duration can be customized via the `duration` prop, and easing can be set with `easing`.

\n
\n \n
\n );\n};\n\nexport default HeightAnimationExample;\n","lang":"typescript","description":"This example demonstrates how to use `react-animate-height` to create an expandable and collapsible content panel. It utilizes React's `useState` hook to manage the target height ('0' for collapsed, 'auto' for expanded) and a button to toggle between these states, showcasing basic setup and prop usage."},"warnings":[{"fix":"Update your callback prop names from `onAnimationStart` to `onHeightAnimationStart` and `onAnimationEnd` to `onHeightAnimationEnd`.","message":"Callback prop names changed in version 3 to avoid clashes with native DOM events. `onAnimationStart` was renamed to `onHeightAnimationStart` and `onAnimationEnd` was renamed to `onHeightAnimationEnd`.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Place custom styling that affects layout on an inner element, or ensure that `className` and `style` props for `AnimateHeight` itself only apply non-layout-altering styles (e.g., `background`, `padding`, `margin`). The component internally handles `height` and `overflow`.","message":"Avoid applying CSS properties that manipulate layout, such as `display`, `height`, or `overflow`, directly to the `AnimateHeight` component's `className` or `style` props. These properties can interfere with the component's internal height calculations and break the animation.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure your project uses `react` and `react-dom` versions 16.8.0 or higher. Update your `package.json` peer dependencies if necessary.","message":"Version 3.x of `react-animate-height` is rewritten using React Hooks. This means it requires React version 16.8.0 or newer. Using it with older React versions will result in runtime errors.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement to `import AnimateHeight from 'react-animate-height';`.","cause":"Attempting to use `AnimateHeight` as a named import or with a CommonJS `require()` statement when it's a default export.","error":"TypeError: AnimateHeight is not a function"},{"fix":"Ensure that the children passed to `AnimateHeight` are standard React elements (JSX) or components, not functions. If you intend to render based on animation state, use callback props like `onHeightAnimationEnd`.","cause":"Incorrectly passing a function as a child to `AnimateHeight` instead of valid React elements.","error":"Warning: Functions are not valid as a React child."},{"fix":"Upgrade your React version to 16.8.0 or higher. You may need to update `react` and `react-dom` in your `package.json`.","cause":"Using `react-animate-height` v3 or higher (which uses hooks) with an older version of React (< 16.8.0).","error":"Hooks can only be called inside of the body of a function component."}],"ecosystem":"npm"}