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-autosize

Usage

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