Simple textarea that expand and shrinks depending on the content

textarea_autoheight.js

import React, { PropTypes } from 'react'

export default class TextareaAutosize extends React.Component {
  static propTypes = {
    value: PropTypes.string,
    className: PropTypes.string,
    style: PropTypes.object,
    onChange: PropTypes.func
  }
  componentDidMount() {
    const textarea = this.refs.textarea
    textarea.style.height = textarea.scrollHeight + 'px'
  }
  handleChange = e => {
    const textarea = this.refs.textarea
    textarea.style.height = 0 // has to set to 0 for shrinking
    textarea.style.height = textarea.scrollHeight + 'px'
    this.props.onChange(e.target.value)
  }
  render = () => (
    <textarea
      {...this.props}
      ref="textarea"
      rows="1"
      onChange={this.handleChange}
    />
  )
}

Would making those two mutations reset your scroll position in some browsers?

Specifically:

textarea.style.height = 0 // has to set to 0 for shrinking
textarea.style.height = textarea.scrollHeight + 'px'

You can render a component twice and just hide one of the renderings so you're not resizing the input the user is manipulating

https://gist.github.com/moodysalem/52601c137109cf87434b

@moodysalem interesting approach