{"library":"react-textarea-autosize","title":"React Textarea Autosize","description":"react-textarea-autosize is a React component that serves as a high-performance, lightweight (approx. 1.3KB minified & gzipped) drop-in replacement for the native `<textarea>` HTML element, automatically adjusting its height to fit its content. Inspired by the popular jQuery Autosize plugin, it provides a seamless user experience for input fields that need to expand dynamically. The package is currently at version 8.5.9 and maintains an active release cadence with frequent patch updates to address bugs and improve compatibility. Key differentiators include its small size, broad React compatibility (supporting React 16.8.0 through 19.0.0), and specific features like `minRows`, `maxRows`, and an `onHeightChange` callback. Recent enhancements have focused on improving module resolution for modern JavaScript runtimes such as Vercel Edge and Cloudflare Workers, resolving race conditions, and bolstering Node.js ESM support.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-textarea-autosize"],"cli":null},"imports":["import TextareaAutosize from 'react-textarea-autosize';","const TextareaAutosize = require('react-textarea-autosize').default;","import type { TextareaAutosizeProps } from 'react-textarea-autosize';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport TextareaAutosize from 'react-textarea-autosize';\n\nconst App = () => {\n  const [value, setValue] = React.useState('Hello, world!\\nThis is an autosizing textarea.\\nTry typing more to see it grow.');\n\n  return (\n    <div style={{ padding: '20px', maxWidth: '400px', margin: 'auto' }}>\n      <h1>Autosizing Textarea Demo</h1>\n      <TextareaAutosize\n        value={value}\n        onChange={(e) => setValue(e.target.value)}\n        minRows={3}\n        maxRows={10}\n        placeholder=\"Type something here...\"\n        style={{\n          width: '100%',\n          padding: '8px',\n          fontSize: '16px',\n          lineHeight: '1.5',\n          border: '1px solid #ccc',\n          borderRadius: '4px',\n          boxSizing: 'border-box', // Crucial for correct sizing\n          resize: 'none', // Disable native resize\n        }}\n        onHeightChange={(height, { rowHeight }) => {\n          console.log(`Textarea height changed to: ${height}px (rowHeight: ${rowHeight}px)`);\n        }}\n      />\n      <p style={{ marginTop: '20px' }}>Current value: {value}</p>\n    </div>\n  );\n};\n\nconst container = document.getElementById('root');\nif (container) {\n  const root = createRoot(container);\n  root.render(<App />);\n} else {\n  console.error(\"Root element not found.\");\n}","lang":"typescript","description":"This example demonstrates how to integrate `TextareaAutosize` into a React application, showing basic usage with state management, `minRows`, `maxRows`, and the `onHeightChange` callback.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}