A React TextArea component that automatically resizes to its content

React Autoresize Textarea

React.createClass({
        displayName: 'Autoresizing TextArea',

        propTypes: {
            height: React.PropTypes.number.isRequired,
            onChangeHeight: React.PropTypes.func.isRequired
        },

        getDefaultProps: function () {
            return {
                height: 0
            };
        },

        componentDidMount: function () {
            this.calculateHeight();
        },

        componentDidUpdate: function () {
            this.calculateHeight();
        },

        calculateHeight: function () {
            const hiddenScrollHeight = this.refs.hidden.scrollHeight;
            if (typeof hiddenScrollHeight !== 'number') {
                return;
            }
            if (hiddenScrollHeight !== this.props.height) {
                this.props.onChangeHeight(hiddenScrollHeight);
            }
        },

        render: function () {
            return React.DOM.span({}, [
                // render the same textarea twice, once with no height
                React.DOM.textarea(Object.assign({}, this.props, {
                    key: 'visible',
                    style: Object.assign({}, this.props.style, { resize: 'none', height: this.props.height })
                })),

                React.DOM.textarea(Object.assign({}, this.props, {
                    key: 'hidden',
                    ref: 'hidden',
                    // used only to calculate the height of the input
                    style: Object.assign({}, this.props.style, {
                        resize: 'none', visibility: 'hidden', position: 'absolute', height: 0
                    })
                }))
            ]);
        }
    })