---
title: "集成 TextareaAutosize UI 组件"
description: "集成一个根据内容自动增长和缩小的自适应高度 textarea 组件。基于 react-textarea-autosize 构建，支持服务端渲染。详情参见文档。"
canonical_url: "https://tiptap.zhcndoc.com/ui-components/primitives/textarea-autosize"
---

# 集成 TextareaAutosize UI 组件

集成一个根据内容自动增长和缩小的自适应高度 textarea 组件。基于 react-textarea-autosize 构建，支持服务端渲染。详情参见文档。

这是一个基于 `react-textarea-autosize` 构建的自适应高度 textarea 组件，会根据内容自动调整高度，并内置服务端渲染兼容性与平滑过渡效果。

> **Interactive demo:** [textarea autosize](https://template.tiptap.dev/preview/tiptap-ui-primitive/textarea-autosize)

## 安装

你可以通过 Tiptap CLI 添加该 primitive

```bash
npx @tiptap/cli@latest add textarea-autosize
```

## 用法

```tsx
import { TextareaAutosize } from '@/components/tiptap-ui-primitive/textarea-autosize'

export default function MyComponent() {
  const [value, setValue] = React.useState('')

  return (
    <div>
      {/* 基础自适应高度 textarea */}
      <TextareaAutosize
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="开始输入吧……我会随内容增长！"
      />

      {/* 带有最小和最大行数的 textarea */}
      <TextareaAutosize minRows={3} maxRows={8} placeholder="我最少 3 行，最多 8 行" />

      {/* 自定义尺寸调整行为的 textarea */}
      <TextareaAutosize
        minRows={2}
        maxRows={10}
        cacheMeasurements={true}
        placeholder="我缓存尺寸，更好性能"
      />
    </div>
  )
}
```

## 属性

### TextareaAutosize

基于 `react-textarea-autosize` 构建，增加了服务端渲染兼容支持。

| 名称       | 类型                             | 默认值      | 说明       |
| -------- | ------------------------------ | -------- | -------- |
| minRows  | `number`                       | 1        | 最小行数     |
| maxRows  | `number`                       | Infinity | 最大行数     |
| value    | `string`                       | -        | 受控的内容值   |
| onChange | `(event: ChangeEvent) => void` | -        | 内容变化事件回调 |

## 依赖

- **react-textarea-autosize**：提供自动调整高度功能的底层库
- **use-isomorphic-layout-effect**：支持服务端渲染的自定义布局 Effect Hook