Resizing text area in JSX

ResizingTextArea.css

.resizing-text-area__container {
  position: relative;
}

.resizing-text-area__input {
  height: 100%;
  overflow: hidden;
  position: absolute;
  resize: none;
  width: 100%;
}

.resizing-text-area__shadow {
  white-space: pre-wrap;
  width: 100%;
  visibility: hidden;
}

ResizingTextArea.jsx.js

/** @jsx React.DOM */

'use strict';

var React = require('react');

var ResizingTextArea = React.createClass({
  getDefaultProps: function() {
    return { className: '' };
  },

  render: function() {
    var shadowValue = this.props.value;

    // A final newline gets collapsed, so we have to add an extra one.
    if (shadowValue.length === 0 ||
        shadowValue[shadowValue.length - 1] === "\n") {
      shadowValue = shadowValue.concat("\n");
    }

    return (
      <div className='resizing-text-area__container'>
        <textarea
          className={'resizing-text-area__input ' + this.props.className}
          value={this.props.value}
          onChange={this.props.onChange}
          onKeyDown={this.props.onKeyDown} />
        <div className={'resizing-text-area__shadow ' + this.props.className}>
          {shadowValue}
        </div>
      </div>
    );
  }
});

module.exports = ResizingTextArea;