React Fluid Container

Graceful dynamic/variable height animation.

Install

npm install react-fluid-container --save

<script src="https://unpkg.com/react-fluid-container/dist/react-fluid-container.js"></script>
(UMD library exposed as `ReactFluidContainer`)

Example

Codepen Demo

import FluidContainer from 'react-fluid-container'

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

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

Props

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 [email protected]:souporserious/react-fluid-container.git

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/