react-auto-resize-textarea v1.0.4

React Auto-Resize TextArea Component

A customizable and accessible auto-resizing textarea component for React, built with TypeScript.

Features

• Auto-Resizing: The textarea automatically adjusts its height based on the content, providing a seamless user experience.
• Customizable Default Height: Set a default height for the textarea, and it will only resize when the content exceeds this threshold.
• Real-time Resize Handling: The component resizes in real-time as the user types, ensuring that all content is visible without the need for scrolling.
• Height Change Callback: Optionally provide a callback function to be notified whenever the textarea's height changes, useful for advanced UI scenarios.
• Fully Accessible: The component passes through all standard textarea attributes, including accessibility attributes (aria-*), ensuring compliance with accessibility standards.

Installation

You can install the package via npm:

npm install react-auto-resize-textarea

Usage

Here’s an example of how to use the auto-resize textarea component in your React application:

import React, { useState } from "react";
import { TextArea } from "react-auto-resize-textarea";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <label htmlFor="example">Your text:</label>
      <TextArea
        id="example"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        autoResize
        defaultHeight={100}
        placeholder="Type here..."
      />
    </div>
  );
};

export default App;

Props

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

License

This project is licensed under the MIT License.