npm

React Fluid Container for Typescript

Fork of react-fluid-container

Graceful dynamic/variable height animation.

This fork works with React 16 and contains Typescript typings in case you needed one. It works only as a module, though let's face it - who doesn't use bundlers these days 😉

Install

npm install react-fluid-container-typescript --save

import { FluidContainer } from 'react-fluid-container-typescript'
 
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: 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: 'auto' | number

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

rmConfig: { val: number; stiffness: number; damping: number; precision: number; }

Pass in any valid React Motion config object.

children: React.ReactNode

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: (currentHeight: number, nextHeight: number) => void;

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

afterAnimation: () => void

Callback after animation has completed.