react-spring-unknown-height.js

import React from 'react';
import {Spring} from '../../src/Spring';

const OnMount = React.createClass({
  getInitialState() {
    return {
      render: true
    };
  },

  componentDidMount() {
    this.props.done(this);

    // Immediately kill
    this.setState({
      render: false
    });
  },

  render() {
    return this.state.render ?
      <div style={{opacity: 0, position: 'absolute'}}>
        {this.props.children}
      </div>
      : null;
  },
});

const text = 'fldsflkajsflkfdsalkfjsaflkjdasf laskf dsf asdf asfldsflkajsflkfdsalkfjsaflkjdasf laskf dsf asdf asdffldsflkajsflkfdsalkfjsaflkjdasf laskf dsf asdf asdffldsflkajsflkfdsalkfjsaflkjdasf laskf dsf asdf asdffldsflkajsflkfdsalkfjsaflkjdasffldsflkajsflkfdsalkfjsaflkjdasf laskf dsf asdf as';

const Demo = React.createClass({
  getInitialState() {
    return {open: false, destination: 0};
  },

  handleMouseDown() {
    this.setState({open: !this.state.open});
  },

  handleTouchStart(e) {
    e.preventDefault();
    this.handleMouseDown();
  },

  getHeight(el) {
    return parseInt(window.getComputedStyle(el).height);
  },

  render() {
    let {open, destination} = this.state;

    return (
      <div>
        <button
          onMouseDown={this.handleMouseDown}
          onTouchStart={this.handleTouchStart}>
          Toggle
        </button>
        { open &&
          <OnMount done={that => this.setState({destination: this.getHeight(React.findDOMNode(that))})}>
          <div>{text}</div>
          </OnMount>
        }
        <Spring endValue={() => ({val: destination, config: [120, 10]})}>
          {({val}) =>
            <div style={{height: val, overflow: 'hidden', border: '1px solid black'}}>{text}</div>
          }
        </Spring>
      </div>
    );
  },
});

export default Demo;