Slideable component using React Measure & React Motion

Slideable.jsx

const { Component, PropTypes } = React
const { Spring } = ReactMotion

const propTypes = {
  component: PropTypes.string,
  defaultHeight: PropTypes.number,
  springConfig: PropTypes.array,
  toggle: PropTypes.bool
}

const defaultProps = {
  component: 'div',
  defaultHeight: 0,
  springConfig: [205, 28],
  toggle: false
}

class Slideable extends Component {
  constructor(props) {
    super(props)
    this.state = { height: null }
  }

  render() {
    const { toggle, component, className, defaultHeight, springConfig, style, children } = this.props;

    return(
      <Measure
        whitelist={['height']}
        onChange={d => this.setState({height: d.height})}
      >
        <Spring
          endValue={{
            val: {
              height: toggle ? (this.state.height || defaultHeight) : defaultHeight
            },
            config: springConfig
          }}
        >
          {interpolated =>
            React.createElement(
              component,
              {
                className,
                style: {
                  height: interpolated.val.height,
                  overflow: interpolated.val.height === this.state.height ? '' : 'hidden',
                  ...style
                }
              },
              children
            )
          }
        </Spring>
      </Measure>
    )
  }
}

Slideable.propTypes = propTypes
Slideable.defaultProps = defaultProps