Integrate the TextareaAutosize UI component
An auto-resizing textarea component built on react-textarea-autosize that automatically adjusts its height based on content, with built-in server-side rendering compatibility and smooth transitions.
Install
You can add the primitive via Tiptap CLI
npx @tiptap/cli@latest add textarea-autosizeUsage
import { TextareaAutosize } from '@/components/tiptap-ui-primitive/textarea-autosize' export default function MyComponent() { const [value, setValue] = React.useState('') return ( <div> {/* Basic auto-resizing textarea */} <TextareaAutosize value={value} onChange={(e) => setValue(e.target.value)} placeholder="Start typing... I'll grow with your content!" /> {/* Textarea with min and max rows */} <TextareaAutosize minRows={3} maxRows={8} placeholder="I have min 3 rows and max 8 rows" /> {/* Textarea with custom resize behavior */} <TextareaAutosize minRows={2} maxRows={10} cacheMeasurements={true} placeholder="I cache measurements for better performance" /> </div> ) }Props
TextareaAutosize
Built on top of react-textarea-autosize with additional SSR compatibility.
| Name | Type | Default | Description |
|---|---|---|---|
| minRows | number | 1 | Minimum number of rows |
| maxRows | number | Infinity | Maximum number of rows |
| value | string | - | Controlled value |
| onChange | (event: ChangeEvent) => void | - | Change event handler |
Dependencies
- react-textarea-autosize: The underlying library that provides auto-resize functionality
- use-isomorphic-layout-effect: Custom hook for SSR-compatible layout effects