Vize
textarea-autosize
Grow a textarea to fit its content.
| Package | @vizejs/composable/textarea-autosize |
| Own the source | vize lib pull composable:textarea-autosize |
| Runtime exports | useTextareaAutosize |
| Gzip budget | 3328 B |
Minimal setup
Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).
vp install @vizejs/composable
Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.
import { useTextareaAutosize } from "@vizejs/composable/textarea-autosize";
Runtime contract
| Utility | Category | Stability | SSR | Hydration | Cleanup | Targets | Host globals | Uses |
|---|---|---|---|---|---|---|---|---|
useTextareaAutosize |
dom | experimental | deterministic-fallback | stable | reactive-scope | web, desktop | globalThis, ResizeObserver |
resolveElement, useResizeObserver, tryOnScopeDispose |
API
useTextareaAutosize
Grow a textarea to fit its content. On each input change (and when the element width changes), the style property is reset to auto, scrollHeight is read, and the height is written back in pixels. Nothing is measured during server rendering, so the markup keeps its declared rows.
function useTextareaAutosize( target: MaybeElementTarget, options: UseTextareaAutosizeOptions = {}, ): TextareaAutosizeControls
Types
UseTextareaAutosizeOptions
Options for useTextareaAutosize.
| Member | Type | Description |
|---|---|---|
input? |
Ref<string> |
Text bound to the textarea. Changes trigger a resize. A fresh ref is created when omitted. |
styleProp? |
TextareaAutosizeStyleProperty |
Style property written with the measured height. |
onResize? |
(height: number) => void |
Called after each resize with the new height. |
host? |
MaybeRefOrGetter<ResizeObserverHost | null | undefined> |
Resize-observer capability used to re-measure when the width changes. |
TextareaAutosizeControls
State returned by useTextareaAutosize.
| Member | Type | Description |
|---|---|---|
input |
Ref<string> |
Text bound to the textarea (use with v-model). |
triggerResize |
() => void |
Re-measure immediately. |