useTextareaAutosize
| Category | Browser |
|---|---|
| Export Size | 857 B |
| Last Changed | 2 weeks ago |
Automatically update the height of a textarea depending on the content.
Usage
<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
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
/** Specify style target to apply the height based on textarea content. If not provided it will use textarea it self. */
styleTarget?: MaybeRef<HTMLElement>
}
export declare function useTextareaAutosize(
options?: UseTextareaAutosizeOptions
): {
textarea: Ref<HTMLTextAreaElement>
input: Ref<string>
triggerResize: () => void
}
export type UseTextareaAutosizeReturn = ReturnType<typeof useTextareaAutosize>Source
© 2019-present Anthony Fu
Licensed under the MIT License.
https://vueuse.org/core/useTextareaAutosize/