Textarea

A multi-line text input component with ASCII-style corner brackets.

Docs•API Reference
[][]

Characters: 0

[][]
[][]

Installation

npm install react-ascii-ui

Usage

import { AsciiTextarea } from 'react-ascii-ui';

export default function Example() {
  const [value, setValue] = useState('');

  return (
    <AsciiTextarea 
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter your message..."
      rows={4}
    />
  );
}

Examples

Basic Textarea

[][]
<AsciiTextarea 
  placeholder="Type your message here..."
  rows={4}
/>

Controlled

[][]
const [value, setValue] = useState('Initial content');

<AsciiTextarea 
  value={value}
  onChange={(e) => setValue(e.target.value)}
  rows={3}
/>

Different Sizes

[][]
[][]
<AsciiTextarea rows={2} placeholder="Small" />
<AsciiTextarea rows={8} placeholder="Large" />

Disabled

[][]
<AsciiTextarea 
  value="Disabled content"
  disabled
  rows={3}
/>

API Reference

Props

PropTypeDefaultDescription
valuestring-Current value of the textarea
onChange(event) => void-Callback fired when content changes
placeholderstring-Placeholder text when empty
rowsnumber4Number of visible text lines
disabledbooleanfalseWhether the textarea is disabled
classNamestring""Additional CSS classes

AsciiTextarea extends all HTML textarea attributes and React.TextareaHTMLAttributes.