# React animate height (slide up/down) component

DevFeed: [React animate height (slide up/down) component](<https://devfeed.tech/articles/react-animate-height-slide-up-down-component-37333.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/react-animate-height-slide-up-down/>)

Author: Stanko

Published: 2017-03-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [React Component](<https://devfeed.tech/topics/react-component.md>), [how to create smooth CSS transitions](<https://devfeed.tech/topics/how-to-create-smooth-css-transitions.md>), [CSS](<https://devfeed.tech/topics/css.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>)

Tags: [component](<https://devfeed.tech/tags/component.md>), [css](<https://devfeed.tech/tags/css.md>), [github](<https://devfeed.tech/tags/github.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [npm](<https://devfeed.tech/tags/npm.md>), [react](<https://devfeed.tech/tags/react.md>)

## AI overview

This tutorial presents a small React component for animating height between collapsed, expanded, and specific pixel values. It explains how the component uses CSS transitions by temporarily replacing auto with numeric heights, then restores the appropriate height and overflow values after the transition.

## Source excerpt

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: Specific height to the other specific height This is the easiest one. Element will have overflow: hidden and translate from one height value to the other. Piece of cake. Specific height (0 included) to auto This one is a bit more interesting. As we can't transition to auto, component will take the content height, apply it to the element, and transition will happen. But important thing is that after the transition is complete, component will reset height to auto and overflow to visible This is important if you add more content to