Import
import { TextArea } from '@adoptaunabuelo/react-components';
Usage
Default Mode
<TextArea
type="default"
placeholder="Enter your message..."
rows={5}
maxLength={500}
/>
Edit Mode (Rich Text)
<TextArea
type="edit"
value={richTextContent}
onChange={(html) => setContent(html)}
placeholder="Type something..."
/>
Props (Default Type)
Initial value for uncontrolled component
Maximum character limit (displays character counter when set)
Visual design: primary (gray background, 6px radius) or secondary (white with border, 12px radius)
onChange
(event: React.ChangeEvent<HTMLTextAreaElement>) => void
Callback fired when text changes
Custom styles for the textarea
Name attribute for form submission
Props (Edit Type)
Renders a rich text editor with Tiptap
HTML content for controlled component
Placeholder text when empty
Callback fired when content changes, receives HTML string
Custom button to display in toolbar (positioned absolute top-right)
Custom styles for the editor container
Features
Default Type
- Height: 100px (customizable via style)
- Font: Poppins 15px
- No resize handle
- Custom scrollbar styling
- Optional character counter
- Enforces maxLength if provided
- Focus state with border color change
Edit Type (Rich Text Editor)
- Powered by Tiptap editor
- Formatting toolbar with:
- Text type selector (Heading 1, Heading 2, Paragraph)
- Bold, Italic, Underline
- Text alignment (Left, Center, Right)
- Toolbar height: 63px
- Scrollable content area
- Returns HTML string via onChange
- Rounded container (12px border radius)
- White background with soft border
Examples
Basic Textarea
<TextArea
type="default"
placeholder="Write your thoughts..."
onChange={(e) => console.log(e.target.value)}
/>
With Character Limit
const [message, setMessage] = useState('');
<TextArea
type="default"
placeholder="Enter message (max 200 characters)"
maxLength={200}
onChange={(e) => setMessage(e.target.value)}
/>
Secondary Design
<TextArea
type="default"
design="secondary"
placeholder="Comments..."
style={{ height: '150px' }}
/>
Rich Text Editor
const [content, setContent] = useState('<p>Initial content</p>');
<TextArea
type="edit"
value={content}
onChange={(html) => setContent(html)}
placeholder="Start typing..."
/>
Rich Text with Custom Toolbar Button
import { Send } from 'lucide-react';
<TextArea
type="edit"
value={emailBody}
onChange={setEmailBody}
placeholder="Compose email..."
ToolbarButton={
<button onClick={handleSend}>
<Send size={20} />
</button>
}
/>
<form onSubmit={handleSubmit}>
<TextArea
type="default"
name="feedback"
placeholder="Your feedback"
maxLength={1000}
design="secondary"
/>
<button type="submit">Submit</button>
</form>
