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.
npm install react-input-autosizeVerified import paths — ran on the pinned version, not inferred.
Demonstrates basic usage of `AutosizeInput` as a controlled component, showing how to manage its value and apply inline styles for proper sizing.
Re-mount the input (e.g., by providing a different `key` prop) or call the `copyInputStyles()` method on the component instance after styles change.
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.Always provide both `value` and `onChange` props to `AutosizeInput` to manage its state explicitly.
Provide the custom font size directly to the component via the `inputStyle` prop, e.g., `<AutosizeInput inputStyle={{ fontSize: 36 }} />`.Ensure `AutosizeInput` always receives both a `value` prop and an `onChange` handler, as it is designed to be a controlled component.
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.