React Animate Height

3.2.3 · active · verified Sun Apr 19

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.

Common errors

```
TypeError: AnimateHeight is not a function
```
cause Attempting to use `AnimateHeight` as a named import or with a CommonJS `require()` statement when it's a default export.

fix Change your import statement to `import AnimateHeight from 'react-animate-height';`.
```
Warning: Functions are not valid as a React child.
```
cause Incorrectly passing a function as a child to `AnimateHeight` instead of valid React elements.

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`.
```
Hooks can only be called inside of the body of a function component.
```
cause Using `react-animate-height` v3 or higher (which uses hooks) with an older version of React (< 16.8.0).

fix Upgrade your React version to 16.8.0 or higher. You may need to update `react` and `react-dom` in your `package.json`.

Warnings

breaking 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`.
Fix: Update your callback prop names from `onAnimationStart` to `onHeightAnimationStart` and `onAnimationEnd` to `onHeightAnimationEnd`.
gotcha 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.
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`.
gotcha 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.
Fix: Ensure your project uses `react` and `react-dom` versions 16.8.0 or higher. Update your `package.json` peer dependencies if necessary.

Install

npm install react-animate-height npm
yarn add react-animate-height yarn
pnpm add react-animate-height pnpm

Imports

AnimateHeight
wrong:
```
import { AnimateHeight } from 'react-animate-height';
const AnimateHeight = require('react-animate-height');
```
correct:
```
import AnimateHeight from 'react-animate-height';
```
AnimateHeight is the default export of the package. Using named import or CommonJS require in modern ES module environments is incorrect.
Height
```
import type { Height } from 'react-animate-height';
```
Type import for the 'height' prop, useful for explicit TypeScript typing.

Quickstart

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.

import React, { useState } from 'react';
import AnimateHeight from 'react-animate-height';

const HeightAnimationExample = () => {
  const [height, setHeight] = useState(0);

  const toggleHeight = () => {
    setHeight(height === 0 ? 'auto' : 0);
  };

  return (
    <div style={{ padding: '20px', border: '1px solid #eee' }}>
      <button
        aria-expanded={height !== 0}
        aria-controls="example-animated-panel"
        onClick={toggleHeight}
        style={{
          padding: '10px 15px',
          backgroundColor: '#007bff',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        {height === 0 ? 'Expand Content' : 'Collapse Content'}
      </button>

      <AnimateHeight
        id="example-animated-panel"
        duration={500}
        height={height}
        easing="ease-in-out"
        style={{ marginTop: '15px', overflow: 'hidden' }}
      >
        <div style={{ padding: '15px', backgroundColor: '#f9f9f9', border: '1px solid #ddd' }}>
          <h3>Animated Content Area</h3>
          <p>This content will smoothly animate its height when expanded or collapsed.</p>
          <p>It can contain any arbitrary React elements or plain HTML.</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
          <p>The animation duration can be customized via the `duration` prop, and easing can be set with `easing`.</p>
        </div>
      </AnimateHeight>
    </div>
  );
};

export default HeightAnimationExample;

view raw JSON →