react-textarea-autosize
Advanced tools
Package description
The react-textarea-autosize package is a React component that automatically adjusts the height of a textarea to fit the content. It is useful for creating text input areas in web applications where the amount of text is dynamic and can grow or shrink.
Auto-resizing textarea
This feature allows the textarea to automatically resize between a minimum and maximum number of rows based on the content.
<TextareaAutosize minRows={3} maxRows={6} />Minimum and maximum height
You can set a minimum and maximum height for the textarea, which will be respected during auto-resizing.
<TextareaAutosize style={{ minHeight: '100px', maxHeight: '300px' }} />Controlled component
The component can be used as a controlled component, with its value being managed by the state of the enclosing component.
<TextareaAutosize value={this.state.text} onChange={this.handleChange} />Uncontrolled component
The component can also be used as an uncontrolled component, where it maintains its own state.
<TextareaAutosize defaultValue='Initial content' />Ref forwarding
React refs can be forwarded to the underlying textarea element, allowing for direct DOM access if needed.
const ref = React.createRef();
<TextareaAutosize ref={ref} />This is a standalone script that can be applied to any textarea element to make it automatically adjust its height. It is not specifically designed for React and requires manual integration.
A similar React component that also resizes textareas to fit the content. It is an alternative to react-textarea-autosize with a slightly different API and feature set.
This package provides a text field component that automatically adjusts its size. It is similar to react-textarea-autosize but is designed for single-line input fields rather than multi-line textareas.
Readme
Replacement for textarea component which automatically grows textarea as content grows:
var Textarea = require('react-textarea-autosize');
React.renderComponent(
<div>
<Textarea></Textarea>
</div>,
document.body);
To release patch, minor or major version:
% make release-patch
% make release-minor
% make release-major
To publish release:
% make publish
FAQs
textarea component for React which grows with content
The npm package react-textarea-autosize receives a total of 2,015,980 weekly downloads. As such, react-textarea-autosize popularity was classified as popular.
We found that react-textarea-autosize demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Researchers have demonstrated that teams of LLM agents can exploit zero-day vulnerabilities with a 53% success rate, and the costs of using AI to do so are rapidly becoming more affordable than hiring a human penetration tester.
Security News
In an unprecedented surge, May 2024 saw the publication of over 5,000 CVEs, marking a historic milestone in cybersecurity with an average of 164 CVEs per day, nearly double the 2023 daily average.
Security News
The White House is addressing fragmented cybersecurity regulations as CISOs report spending up to 50% of their time on compliance, aiming to harmonize requirements and improve cybersecurity outcomes.