上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useAdaptiveTextarea

Tags:
Element

一个 React 钩子 (Hook)，用于创建自适应的文本域 (textarea)，能够基于其内容自动调整高度。

演示

在文本域中输入内容，然后看文本域的高度如何自动调整。

源码
Textarea height:
0
Resize times:
0

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const { ref, height, resize } = useAdaptiveTextarea(options)

选项 Options

export interface UseAdaptiveTextareaOptions<T extends HTMLElement = HTMLElement> {
  /**
   * 触发调整大小的依赖列表
   *
   * @defaultValue []
   */
  watch?: DependencyList
  /**
   * 触发调整大小的事件列表
   *
   * @defaultValue ['input']
   */
  events?: (keyof HTMLElementEventMap)[]
  /**
   * 是否自动调整 `textarea` 元素的高度
   *
   * @defaultValue true
   */
  autoHeight?: boolean
  /**
   * 应用高度样式的目标元素
   *
   * @defaultValue undefined
   */
  styleTarget?: ElementTarget<T>
  /**
   * 应用高度值的样式属性
   *
   * @defaultValue 'height'
   */
  styleProp?: 'height' | 'minHeight'
  /**
   * `textarea` 元素高度变化时调用的回调函数
   *
   * @defaultValue undefined
   */
  onResize?: (height: number, prevHeight: number) => void
}

返回值

export interface UseAdaptiveTextareaReturns {
  /**
   * 应传递给 `textarea` 元素的 React 引用
   */
  ref: React.RefObject<HTMLTextAreaElement | null>
  /**
   * `textarea` 元素当前的高度
   */
  height: number
  /**
   * 手动调整 `textarea` 元素大小的函数
   *
   * @returns {void} `void`
   */
  resize(): void
}