This is a component that renders an input element that scales with its text.

Here it is in action:

npm install react-adaptive-input

This component serves as a transparent layer over a regular controlled input component. Any props that you want passed into the input component are specified through the inputProps prop.

import React from 'react'
import AdaptiveInput from 'react-adaptive-input'

const BasicExample = React.createClass({
  getInitialState: function() {
    return { value: '' }
  },
  render: function() {
    const inputProps = {
      value: this.state.value,
      onChange: (event, newValue) => {
        this.setState({ value: newValue })
      }
    }

    return <AdaptiveInput inputProps={ inputProps } />
  }
});

This component implements a controlled input component. Therefore at least a value and an onChange should be supplied. Any additional props for the input should be added here as well.

For example:

const inputProps = {
  value: this.state.value,
  onChange: (_, newValue) => this.setState({ value: newValue }),
  placeholder: 'Enter your name'
}

Notice onChange has an additional newValue parameter added for convenience:

function onChange(event, newValue)

Depending on your styling, you might need to manually tweak the width of the input element. padding is a number value that adds extra width equivalent to n space characters (' ').

The default padding is 1.