react-animated-ui/docs/AnimatedTextArea.md

A React UI library featuring animated components including buttons, forms, dropdowns, date pickers, and more.

# Animated Text Area

## Description  
A smooth, animated textarea component that enhances user input experience with focus animations and auto-resizing capabilities.

---

## Props

| Prop         | Type                    | Default  | Description                                  |
|--------------|-------------------------|----------|----------------------------------------------|
| `value`      | `string`                | `""`     | Controlled value of the textarea              |
| `onChange`   | `(event: React.ChangeEvent<HTMLTextAreaElement>) => void` | `-` | Callback fired when textarea content changes  |
| `placeholder`| `string`                | `""`     | Placeholder text                              |
| `rows`       | `number`                | `3`      | Initial number of visible rows                 |
| `maxRows`    | `number`                | `10`     | Maximum number of visible rows                 |
| `disabled`   | `boolean`               | `false`  | Disable the textarea                           |
| `className`  | `string`                | `""`     | Custom CSS class for styling                    |

---

## Usage

```tsx
import React, { useState } from 'react';
import { AnimatedTextArea } from 'react-animated-ui';

function MyComponent() {
  const [text, setText] = useState("");

  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setText(e.target.value);
  };

  return (
    <AnimatedTextArea
      value={text}
      onChange={handleChange}
      placeholder="Type your message..."
      rows={3}
      maxRows={6}
    />
  );
}