React Input Autosize

3.0.0 · maintenance · verified Sun Apr 19

React-Input-Autosize is a React component designed to provide an `<input>` field that automatically adjusts its width to fit its content. The current stable version is 3.0.0, supporting React versions 16.3.0 and 17.0.0. While there's no explicit release cadence, the package has maintained stability across major React versions. Its key differentiator lies in abstracting away the complexities of dynamic input sizing, typically achieved by wrapping the native input element within a `div` to accurately measure content width. It aims to replicate the behavior of a standard React input while handling resizing automatically, including managing custom font sizes and injecting necessary styles for cross-browser compatibility (e.g., hiding IE/Edge's clear indicator), although this style injection can be disabled for CSP-restricted environments. It functions exclusively as a controlled component.

Common errors

```
Warning: A component is changing an uncontrolled input to be controlled.
```
cause Attempting to use `AutosizeInput` without providing a `value` prop, or initializing it without `value` then later supplying it.

fix Ensure `AutosizeInput` always receives both a `value` prop and an `onChange` handler, as it is designed to be a controlled component.
```
AutosizeInput width calculation is incorrect after global stylesheet changes.
```
cause CSS styles (e.g., font-size, padding) affecting the input element were modified in a global stylesheet after the `AutosizeInput` component mounted.

fix To force a re-evaluation of styles, either re-mount the component (by giving it a new `key` prop) or manually call `copyInputStyles()` on the `AutosizeInput` instance if you have a ref to it.

Warnings

gotcha Styles applied to the input are only copied when the component mounts. Subsequent changes to stylesheets may cause size to be detected incorrectly.
Fix: Re-mount the input (e.g., by providing a different `key` prop) or call the `copyInputStyles()` method on the component instance after styles change.
gotcha The component automatically injects a stylesheet to hide IE/Edge's 'clear' indicator, which can be incompatible with strict Content Security Policy (CSP) rules.
Fix: Pass the `injectStyles={false}` prop to `AutosizeInput`. If you do this, you must manually add `input::-ms-clear {display: none;}` to your own stylesheet to prevent UI issues.
gotcha `AutosizeInput` is a controlled input component and requires the `value` prop to function correctly. It does not support being used as an uncontrolled input.
Fix: Always provide both `value` and `onChange` props to `AutosizeInput` to manage its state explicitly.
gotcha If your input uses custom font sizes not inherited from the default stylesheet, `AutosizeInput` might not calculate the correct width.
Fix: Provide the custom font size directly to the component via the `inputStyle` prop, e.g., `<AutosizeInput inputStyle={{ fontSize: 36 }} />`.

Install

npm install react-input-autosize npm
yarn add react-input-autosize yarn
pnpm add react-input-autosize pnpm

Imports

AutosizeInput

wrong:

import { AutosizeInput } from 'react-input-autosize';

correct:

import AutosizeInput from 'react-input-autosize';

The component is exported as a default export.

AutosizeInput (CommonJS)
```
const AutosizeInput = require('react-input-autosize');
```
For CommonJS environments, ensure `react-input-autosize` is installed and resolved correctly by your bundler.

Quickstart

Demonstrates basic usage of `AutosizeInput` as a controlled component, showing how to manage its value and apply inline styles for proper sizing.

import React, { useState, useEffect } from 'react';
import AutosizeInput from 'react-input-autosize';

function MyForm() {
  const [inputValue, setInputValue] = useState('Hello World');

  useEffect(() => {
    // This effect is just to show the value in console for demonstration
    // console.log('Current input value:', inputValue);
  }, [inputValue]);

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <label>
        Auto-resizing Input:
        <AutosizeInput
          name="form-field-name"
          value={inputValue}
          onChange={handleChange}
          inputStyle={{
            border: '1px solid #ccc',
            borderRadius: 4,
            padding: '5px 8px',
            fontSize: 16
          }}
          placeholder="Type something here..."
        />
      </label>
      <p>The input above resizes automatically as you type.</p>
    </div>
  );
}

// Example of how to render this component in a typical React application:
// import { createRoot } from 'react-dom/client';
// const container = document.getElementById('root');
// if (container) {
//   const root = createRoot(container);
//   root.render(<MyForm />);
// }

view raw JSON →