06 Mar 2017

This article will take about 3 minutes to read.

Most JavaScript developers used jQuery’s .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.)

As we use this a lot in our company, I tried to find React component that does it. Found a couple, didn’t like them, as most of them rely on a tone of dependencies. Again, I decided to write my own - small, fast and with no dependencies.


You can see it live here. Same page has the documentation and links to the npm and GitHub.

Component can animate from (and to) 0 (collapsed), auto (expanded), and to any specific value in pixels.


Install it from npm

npm install --save react-animate-height

import it in your React project, and wrap the content you want to animate in it.

import AnimateHeight from 'react-animate-height';

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

For more detailed documentation and all props explained, check the GitHub repo,

How it works

Component is using CSS transitions, but with a small trick to make it work. We mentioned that transitions only work between two numeric values. We’ll replace auto with numeric value just before transition happens.

There are three possible cases:


I guess everyone took slide up/down for granted, but in the end there is a little logic that needs to be put in to make it work properly. On the other hand some people are solving it by pilling up the 3rd party code. Please, when you are open sourcing a library, keep it small and simple!

Hope you’ll use it!


Comments (4)

Luna Goodnight
07 Sep 2018, 02:03 PM

Hi, thanks to your great work. But I wonder why I can’t install it?

07 Sep 2018, 02:10 PM

Hello Luna,

Make sure your node version is up to date and follow quick start section in the documentation.


Ayden King
02 Oct 2019, 06:09 PM

Hello, know this is old but I was wondering - is it possible to animate without having any fixed heights? Both sizes I need to alternate between are height: auto.

Thanks for your work on this project

02 Oct 2019, 08:22 PM

Hey Ayden, I hacked an example of how you can do it using AnimateHeight. It is a little bit tricky, but it works. (Make sure you reset fixed height on window resize.)

EDIT: Check this proof of concept I did some time ago. It animates height and opacity between two React components.