Skip to content
Back to skills

Textarea

ASecurity

Auto-resizing multi-line text input built on `react-textarea-autosize`. Supports sizes, error state, and imperative ref API.

  • 4 stars
  • 0 votes
  • 0 copies
  • 2 views
  • Added May 27, 2026
data-aitypescriptreactapi

Works with

  • api

Security analysis

A100/100

Scanned May 27, 2026

npx -y skills add reaviz/skills --skill textarea --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Textarea?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Textarea
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/reaviz-textarea/badge)](https://www.skillsdirectory.com/skills/reaviz-textarea)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
# Textarea

Auto-resizing multi-line text input built on `react-textarea-autosize`. Supports sizes, error state, and imperative ref API.

## Import

```tsx
import { Textarea } from 'reablocks';
```

## Textarea Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Textarea size |
| `fullWidth` | `boolean` | — | Take full container width |
| `error` | `boolean` | — | Error state (red border) |
| `containerClassName` | `string` | — | CSS classes for the container div |
| `className` | `string` | — | CSS classes for the textarea element |
| `theme` | `TextareaTheme` | — | Per-instance theme override |

Also accepts all `TextareaAutosizeProps` from `react-textarea-autosize` (e.g. `minRows`, `maxRows`, `placeholder`, `disabled`, `value`, `onChange`).

## Basic Usage

```tsx
<Textarea placeholder="Enter description..." />
```

## Sizes

```tsx
<Textarea size="small" placeholder="Small" />
<Textarea size="medium" placeholder="Medium" />
<Textarea size="large" placeholder="Large" />
```

## Full Width with Error

```tsx
<Textarea fullWidth error placeholder="Required field" />
```

## Ref API

```tsx
const ref = useRef<TextAreaRef>(null);

<Textarea ref={ref} />

// Imperative methods:
ref.current.focus();
ref.current.blur();
ref.current.textareaRef;    // HTMLTextAreaElement ref
ref.current.containerRef;   // Container div ref
```

## TextareaTheme Interface

```typescript
interface TextareaTheme {
  base: string;       // Container (flex, border, rounded, bg, transition)
  input: string;      // Textarea element (resize-none, bg-transparent)
  fullWidth: string;  // Full width override
  error: string;      // Error border
  disabled: string;   // Disabled state
  sizes: { small, medium, large };
}
```

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.