TypeScript icon, indicating that this package has built-in type declarations

0.6.3 • Public • Published

React Fluid Container for Typescript

npm version Dependency Status

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 😉


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

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


npm i react-fluid-container-typescript

DownloadsWeekly Downloads






Last publish


  • deviousm