Textarea Auto Resize with React

Textarea.jsx

const DEFAULT_HEIGHT = 20;

export default class Textarea extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      height: DEFAULT_HEIGHT,
      value: "Don't get lost in the upside down",
    };

    this.setValue = this.setValue.bind(this);
    this.setFilledTextareaHeight = this.setFilledTextareaHeight.bind(this);
  }

  componentDidMount() {
    this.mounted = true;

    this.setFilledTextareaHeight();
  }

  setFilledTextareaHeight() {
    if (this.mounted) {
      const element = this.ghost;

      this.setState({
        height: element.clientHeight,
      });
    }
  }

  setValue(event) {
    const { value }= event.target;

    this.setState({ value });
  }

  getExpandableField() {
    const isOneLine = this.state.height <= DEFAULT_HEIGHT;
    const { height, value } = this.state;

    return (
      <div>
        <label htmlFor="textarea">Add some text...</label>
        <textarea
          className="textarea"
          name="textarea"
          id="textarea"
          autoFocus={true}
          defaultValue={value}
          style={{
            height,
            resize: isOneLine ? "none" : null
          }}
          onChange={this.setValue}
          onKeyUp={this.setFilledTextareaHeight}
        />
      </div>
    );
  }

  getGhostField() {
    return (
      <div
        className="textarea textarea--ghost"
        ref={(c) => this.ghost = c}
        aria-hidden="true"
      >
        {this.state.value}
      </div>
    );
  }

  render() {
    return (
      <div className="container">
        {this.getExpandableField()}
        {this.getGhostField()}
      </div>
    );
  }
}

Textarea.scss

.container {
  position: relative;
}

.textarea {
  width: 360px;
  outline: none;
  min-height: 20px;
  padding: 0;
  box-shadow: none;
  display: block;
  border: 2px solid black;
  overflow: hidden;  // Removes scrollbar
  transition: height 0.2s ease;
}

.textarea--ghost {
  opacity: 0.3;
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;  
  //  Uncomment below to hide the ghost div... 
  //
  //  visibility: hidden;
  //  position: absolute;
  //  top: 0;
}

Thanks for writing this! I've only been using React for a few weeks, this helped. I've got a suggestion and a question.

The suggestion is that you can handle variable width textareas by reading the width of the textarea and using that to set the width of the ghost in setFilledTextareaHeight. That's what I did in mine.

A question: any thoughts about how to handle expanding the height when the user hits enter/return? I've been playing with changing the ghost element to a textarea with height 'auto', but I haven't gotten it right yet.