Auto-resizing Input Component for React with Code Example

Auto-resizing Input Component for React using react-input-autosize with Code Example.

import React from 'react';
import ReactDOM from 'react-dom';
import AutosizeInput from 'react-input-autosize';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value1: '',
      value2: 'example',
      value3: 3,
      value4: '',
      value5: '',
    };
  }
  updateInputValue = (input, event) => {
    const newState = {};
    newState[input] = event.target.value;
    this.setState(newState);
  };
  render() {

  return (
    <div className="bg-white p-4 shadow-md rounded-md space-y-2">
      <h2 className="font-semibold text-2xl mb-2"> React Autosize Input </h2>
      <h3>Simple example:</h3>
      <AutosizeInput
        autoFocus
        value={this.state.value1}
        onChange={this.updateInputValue.bind(this, 'value1')}

      />
      <h3>Styled example with default value:</h3>
      <AutosizeInput
        value={this.state.value2}
        onChange={this.updateInputValue.bind(this, 'value2')}
        style={{ background: '#eee', borderRadius: 5, padding: 5 }}
        inputStyle={{ border: '1px solid #999', borderRadius: 3, padding: 3, fontSize: 14 }}
      />
      <h3>Typed example with default value:</h3>
      <AutosizeInput
        value={this.state.value3}
        type="number"
        onChange={this.updateInputValue.bind(this, 'value3')}
      />
      <h3>Input with placeholder:</h3>
      <AutosizeInput
        placeholder="Placeholder"
        value={this.state.value4}
        onChange={this.updateInputValue.bind(this, 'value4')}
        style={{ background: '#eee', borderRadius: 5, padding: 5 }}
        inputStyle={{ border: '1px solid #999', borderRadius: 3, padding: 3, fontSize: 14 }}
      />
      <h3>Input with placeholder as minimum width:</h3>
      <AutosizeInput
        placeholder="Placeholder"
        placeholderIsMinWidth
        value={this.state.value5}
        onChange={this.updateInputValue.bind(this, 'value5')}
        style={{ background: '#eee', borderRadius: 5, padding: 5 }}
        inputStyle={{ border: '1px solid #999', borderRadius: 3, padding: 3, fontSize: 14 }}
      />
    </div>
  );
};
}

ReactDOM.render(<App />, document.getElementById('root'));
<div id="root"></div>
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

html,
body {
  font-family: 'Roboto', cursive;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  /* font-size: 30px; */
}