My blog GitHub npm

React Animate Height

Lightweight React component for animating height using CSS transitions. Slide up/down the element, and to any specific height. Check the demo below.

CSS classes are applied in specific animation states, check animationStateClasses prop.

Detailed documentation is available on GitHub.

Usage

Import the component, and use it to wrap content whose height you want to animate.

import AnimateHeight from 'react-animate-height';

<AnimateHeight
  duration={ 500 }
  height={ 'auto' }
>
  <h1>Your content goes here</h1>
  <p>Put as many React or HTML components here.</p>
</AnimateHeight>