Graceful dynamic/variable height animation.

Usage no npm install needed!

<script type="module">
  import reactFluidContainer from '';


React Fluid Container

npm version Dependency Status

Graceful dynamic/variable height animation.


npm install react-fluid-container --save

<script src=""></script>
(UMD library exposed as `ReactFluidContainer`)


Codepen Demo

import FluidContainer from 'react-fluid-container'

class App extends Component {
  constructor() {
    this.state = {
      showPanel: false

  render() {
    const { showPanel } = this.state
    return (
      <div className="accordion">
          onClick={() => this.setState({ showPanel: !showPanel })}
          Toggle accordion
          height={showPanel ? 'auto' : 0}
          <div>Auto height animation!</div>


tag: PropTypes.string

The wrapping element around your only child element. Defaults to div. Any other valid props like className will be passed to this element.

height: PropTypes.oneOf(['auto', PropTypes.number])

The height value you want to animate to. Defaults to auto.

rmConfig: React.PropTypes.objectOf(React.PropTypes.number)

Pass in any valid React Motion config object.

children: PropTypes.node.isRequired (only one child allowed)

Only one child is allowed and is what the measurements will be based off of. This should be considered a pretty "dumb" element that is just a wrapper to measure off of. Make sure there are no margins are "hanging" outside of your elements. You can use 1px padding to avoid this.

beforeAnimation: PropTypes.func(currentHeight, nextHeight)

Callback before animation has started. Passes in previous and next heights.

afterAnimation: PropTypes.func

Callback after animation has completed.

Running Locally

clone repo

git clone

move into folder

cd ~/react-fluid-container

install dependencies

npm install

run dev mode

npm run dev

open your browser and visit: http://localhost:8080/