06 Mar 2017

This article will take about 3 minutes to read.
2 Comments

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.

Demo

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.

Usage

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';

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

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:

Conclusion

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!

Category
React

Comments (2)

Luna Goodnight
07 Sep 2018, 02:03 PM

Hi, thanks to your great work.

But I wonder why I can't install it?

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

Cheers!

Leave a comment

Sending failed, please try again.
Thank you! Your comment is sent. Please note that all of the comments go through moderation.