VueUseuseTextareaAutosize
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 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 type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>
Source
Contributors
Anthony Fu
Dominik Pschenitschni
Jelf
Enzo Innocenzi