{"id":11728,"library":"react-input-autosize","title":"React Input Autosize","description":"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.","status":"maintenance","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/JedWatson/react-input-autosize","tags":["javascript","react","react-component","input","autosize"],"install":[{"cmd":"npm install react-input-autosize","lang":"bash","label":"npm"},{"cmd":"yarn add react-input-autosize","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-input-autosize","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for React component functionality.","package":"react","optional":false}],"imports":[{"note":"The component is exported as a default export.","wrong":"import { AutosizeInput } from 'react-input-autosize';","symbol":"AutosizeInput","correct":"import AutosizeInput from 'react-input-autosize';"},{"note":"For CommonJS environments, ensure `react-input-autosize` is installed and resolved correctly by your bundler.","symbol":"AutosizeInput (CommonJS)","correct":"const AutosizeInput = require('react-input-autosize');"}],"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport AutosizeInput from 'react-input-autosize';\n\nfunction MyForm() {\n  const [inputValue, setInputValue] = useState('Hello World');\n\n  useEffect(() => {\n    // This effect is just to show the value in console for demonstration\n    // console.log('Current input value:', inputValue);\n  }, [inputValue]);\n\n  const handleChange = (event) => {\n    setInputValue(event.target.value);\n  };\n\n  return (\n    <div>\n      <label>\n        Auto-resizing Input:\n        <AutosizeInput\n          name=\"form-field-name\"\n          value={inputValue}\n          onChange={handleChange}\n          inputStyle={{\n            border: '1px solid #ccc',\n            borderRadius: 4,\n            padding: '5px 8px',\n            fontSize: 16\n          }}\n          placeholder=\"Type something here...\"\n        />\n      </label>\n      <p>The input above resizes automatically as you type.</p>\n    </div>\n  );\n}\n\n// Example of how to render this component in a typical React application:\n// import { createRoot } from 'react-dom/client';\n// const container = document.getElementById('root');\n// if (container) {\n//   const root = createRoot(container);\n//   root.render(<MyForm />);\n// }","lang":"javascript","description":"Demonstrates basic usage of `AutosizeInput` as a controlled component, showing how to manage its value and apply inline styles for proper sizing."},"warnings":[{"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.","message":"Styles applied to the input are only copied when the component mounts. Subsequent changes to stylesheets may cause size to be detected incorrectly.","severity":"gotcha","affected_versions":">=3.0.0"},{"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.","message":"The component automatically injects a stylesheet to hide IE/Edge's 'clear' indicator, which can be incompatible with strict Content Security Policy (CSP) rules.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always provide both `value` and `onChange` props to `AutosizeInput` to manage its state explicitly.","message":"`AutosizeInput` is a controlled input component and requires the `value` prop to function correctly. It does not support being used as an uncontrolled input.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Provide the custom font size directly to the component via the `inputStyle` prop, e.g., `<AutosizeInput inputStyle={{ fontSize: 36 }} />`.","message":"If your input uses custom font sizes not inherited from the default stylesheet, `AutosizeInput` might not calculate the correct width.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `AutosizeInput` always receives both a `value` prop and an `onChange` handler, as it is designed to be a controlled component.","cause":"Attempting to use `AutosizeInput` without providing a `value` prop, or initializing it without `value` then later supplying it.","error":"Warning: A component is changing an uncontrolled input to be controlled."},{"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.","cause":"CSS styles (e.g., font-size, padding) affecting the input element were modified in a global stylesheet after the `AutosizeInput` component mounted.","error":"AutosizeInput width calculation is incorrect after global stylesheet changes."}],"ecosystem":"npm"}