Skip to content
On this page

useTextareaAutosize

Category
Export Size
889 B
Last Changed
4 days ago

Automatically update the height of a textarea depending on the content.

Demo

Type, the textarea will grow:

Usage

vue
<script setup lang="ts">
const { textarea, input } = useTextareaAutosize()
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
  />
</template>
<script setup lang="ts">
const { textarea, input } = useTextareaAutosize()
</script>

<template>
  <textarea
    ref="textarea"
    v-model="input"
    class="resize-none"
    placeholder="What's on your mind?"
  />
</template>

Type Declarations

typescript
export interface UseTextareaAutosizeOptions {
  /** Textarea element to autosize. */
  element?: MaybeRef<HTMLTextAreaElement | undefined>
  /** Textarea content. */
  input?: MaybeRef<string | undefined>
  /** Watch sources that should trigger a textarea resize. */
  watch?: WatchSource | Array<WatchSource>
  /** Function called when the textarea size changes. */
  onResize?: () => void
}
export declare function useTextareaAutosize(
  options?: UseTextareaAutosizeOptions
): {
  textarea: Ref<HTMLTextAreaElement>
  input: Ref<string>
  triggerResize: () => void
}
export declare type UseTextareaAutosizeReturn = ReturnType<
  typeof useTextareaAutosize
>
export interface UseTextareaAutosizeOptions {
  /** Textarea element to autosize. */
  element?: MaybeRef<HTMLTextAreaElement | undefined>
  /** Textarea content. */
  input?: MaybeRef<string | undefined>
  /** Watch sources that should trigger a textarea resize. */
  watch?: WatchSource | Array<WatchSource>
  /** Function called when the textarea size changes. */
  onResize?: () => void
}
export declare function useTextareaAutosize(
  options?: UseTextareaAutosizeOptions
): {
  textarea: Ref<HTMLTextAreaElement>
  input: Ref<string>
  triggerResize: () => void
}
export declare type UseTextareaAutosizeReturn = ReturnType<
  typeof useTextareaAutosize
>

Source

SourceDemoDocs

Contributors

Anthony Fu
Dominik Pschenitschni
Jelf
Enzo Innocenzi

Changelog

v9.7.0 on 12/16/2022
ea497 - fix: reference
ebd48 - fix: support changes of element width (#2541)
v8.9.0 on 7/6/2022
4c378 - feat: new function (#1756)

Released under the MIT License.