Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-fluid-container-typescript with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactFluidContainerTypescript = require("react-fluid-container-typescript")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-fluid-container-typescript v0.6.3

Graceful dynamic/variable height animation with typescript support.

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 :wink:

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free