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 |
Usage
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. |