Collapse.jsx

import React, { PropTypes, Component } from 'react'

import styles from './../styles/Collapse.scss'

class Collapse extends Component {

    static propTypes = {
        open: PropTypes.bool,
        className: PropTypes.string,
    }

    constructor() {
        super()
        this.manualUpdate = this.manualUpdate.bind(this)
    }

    componentDidMount() {
        this.manualUpdate()
        window.addEventListener('resize', this.manualUpdate)
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.manualUpdate)
    }

    componentDidUpdate(prevProps) {
        if(prevProps.open !== this.props.open || prevProps.children !== this.props.children) {
            this.manualUpdate()
        }
    }

    manualUpdate() {
        const originalHeight = this.el.style.height // save height so we can revert later
        this.el.style.height = 'auto' // manually set to auto so we can get computed height
        const computedHeight = this.el.clientHeight

        // manually set the height back, so now we're back to parity with pre-render state
        this.el.style.height = originalHeight

        // after a short delay, update the styles to their new values so css does the animation
        setTimeout(() => {
            if(this.props.open) {
                this.el.style.height = computedHeight + 'px'
            } else {
                this.el.style.height = '0'
            }
        }, 10)
    }

    render() {
        return (
            <div className={`${this.props.className} ${styles.collapse}`} ref={el => this.el = el}>
                {this.props.children}
            </div>
        )
    }

}

export default Collapse

Collapse.scss

.collapse {
    transition: height 0.3s ease;
    overflow: hidden;
    height: 0; // avoid flash of expanded content on page load
}