React Tailwind Resizable Textarea Component

Textarea is a crucial part of any form, especially when users need to input large text like comments, feedback, or descriptions. In this article, we'll explore a reusable Textarea component built using React, TypeScript, and Tailwind CSS.

This component is simple, flexible, and comes with useful features like an optional label, auto-height adjustment, resizability, and focus styling. If you've already checked out our Input, Radio Button, or Checkbox components, this is the next step in building dynamic and user-friendly forms.

Key Features of the Textarea Component

Let’s go through the features of this Textarea component and why they make it a great choice for your React projects:

1. Optional Label:
   • The component includes an optional label prop. If you provide a label, it will display above the textarea; if not, it will be hidden, keeping your forms clean and minimal.
2. Auto Height:
   • The autoHeight feature dynamically adjusts the textarea’s height based on the content inside it. No more awkward scrollbars or fixed heights!
3. Resizability:
   • You can control how the textarea can be resized by using the resize prop. Options include none, both, horizontal, or vertical.
4. Focus Styles:
   • Tailwind's built-in focus classes add a smooth and accessible highlight when users interact with the textarea. The default style uses a subtle blue ring for clarity.
5. Custom Classes:
   • The className prop allows you to add custom styles to fit the component into any design system effortlessly.

Textarea Component UI

Here’s a preview of how the textarea component will look:

(Visual representation of the component.)

React Tailwind Resizable Textarea Component Code

Below is the full code for the Textarea component. You can copy and customize it as needed:

Copy
1import React, { useRef, useEffect, ChangeEvent } from 'react'
2
3interface TextAreaProps {
4  label?: string
5  value: string
6  onChange: (e: ChangeEvent<HTMLTextAreaElement>) => void
7  placeholder?: string
8  autoHeight?: boolean // Enable auto-height adjustment
9  resize?: 'none' | 'both' | 'horizontal' | 'vertical' // Control resizing
10  className?: string // Allow custom classes
11}
12
13export const TextArea: React.FC<TextAreaProps> = ({
14  label,
15  value,
16  onChange,
17  placeholder = 'Enter text...',
18  autoHeight = true,
19  resize = 'vertical',
20  className = '',
21}) => {
22  const textAreaRef = useRef<HTMLTextAreaElement | null>(null)
23
24  useEffect(() => {
25    if (autoHeight && textAreaRef.current) {
26      textAreaRef.current.style.height = 'auto' // Reset height
27      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px` // Adjust to content
28    }
29  }, [value, autoHeight])
30
31  return (
32    <div className={`w-full ${className}`}>
33      {label && (
34        <label className="mb-2 block text-sm font-medium text-black">
35          {label}
36        </label>
37      )}
38      <textarea
39        ref={textAreaRef}
40        value={value}
41        onChange={onChange}
42        placeholder={placeholder}
43        className={`w-full rounded-lg border border-[#DCDFEA] bg-white p-3 text-sm placeholder:text-[#9C9C9C] focus:border-blue-300 focus:outline-none focus:ring-1 focus:ring-blue-300 ${resize === 'none' ? 'resize-none' : ''} ${resize === 'both' ? 'resize' : ''} ${resize === 'horizontal' ? 'resize-x' : ''} ${resize === 'vertical' ? 'resize-y' : ''} `}
44        style={{ resize }}
45      />
46    </div>
47  )
48}

How to Use the Component in a Parent

Here’s a quick example of how to use the Textarea component in your application:

Copy
1import React, { useState } from 'react'
2import { TextArea } from './components/TextArea'
3
4const App: React.FC = () => {
5  const [text, setText] = useState('')
6
7  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
8    setText(e.target.value)
9  }
10
11  return (
12    <div className="min-h-screen p-6">
13      <TextArea
14        label="Your Message"
15        value={text}
16        onChange={handleTextChange}
17        placeholder="Type something here..."
18        autoHeight
19        resize="none"
20        className="max-w-md"
21      />
22    </div>
23  )
24}
25
26export default App

Feel free to use this code in your projects, and if you find it helpful, don’t forget to share it with your fellow developers!

Looking for more components? Check out our other articles on building React components with Tailwind CSS.