Registry / web-framework / react-animate-height

react-animate-height

library3.2.3jsnpmunverified

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.

web-framework

npm install react-animate-height

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-ANIMATE-HEIG

react-animate-height

web-frameworkjavascriptv3.2.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

AnimateHeight

✓ import AnimateHeight from 'react-animate-height';

✗ import { AnimateHeight } from 'react-animate-height'; const AnimateHeight = require('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.

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;

Debug

Known issues

breakingCallback 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`.

affects: >=3.0.0

gotchaAvoid 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`.

affects: >=1.0.0

gotchaVersion 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.

affects: >=3.0.0

Errors

Common errors & fixes

TypeError: AnimateHeight is not a function

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.

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.

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`.

Upgrade

Version history

3.2.3latest on npm

Audit

Dependencies

reactrequiredPeer dependency, required for React functionality, especially Hooks since v3.

react-domrequiredPeer dependency, required for rendering React components.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/Stanko/react-animate-height ↗

packagehttps://www.npmjs.com/package/react-animate-height ↗