⬅️ Back to Table of Contents

📄 useTextareaAutosize

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	13
🟢 Vue Composition API	3
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useTextareaAutosize/index.ts

📦 Imports

Name	Source
Fn	@vueuse/shared
MaybeRef	vue
MultiWatchSources	vue
Ref	vue
WatchSource	vue
ConfigurableWindow	../_configurable
toRef	@vueuse/shared
nextTick	vue
shallowRef	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
useResizeObserver	../useResizeObserver

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none
watch	watch	none	none
watch	watch	none	none

---

Functions

useTextareaAutosize(options: UseTextareaAutosizeOptions): UseTextareaAutosizeReturn

Parameters:

• options UseTextareaAutosizeOptions

Returns: UseTextareaAutosizeReturn

Calls:

• toRef (from @vueuse/shared)
• shallowRef (from vue)
• toValue (from vue)
• Math.min
• watch (from vue)
• nextTick (from vue)
• options?.onResize
• useResizeObserver (from ../useResizeObserver)
• tryRequestAnimationFrame
• triggerResize

Internal Comments:

// If style target is provided update its height

Code

export function useTextareaAutosize(options: UseTextareaAutosizeOptions = {}): UseTextareaAutosizeReturn {
  const { window = defaultWindow } = options
  const textarea = toRef(options?.element)
  const input = toRef(options?.input ?? '')
  const styleProp = options?.styleProp ?? 'height'
  const textareaScrollHeight = shallowRef(1)
  const textareaOldWidth = shallowRef(0)

  function triggerResize() {
    if (!textarea.value)
      return

    let height = ''
    const maxHeight = options?.maxHeight

    textarea.value.style[styleProp] = '1px'
    textareaScrollHeight.value = textarea.value?.scrollHeight
    const _styleTarget = toValue(options?.styleTarget)
    const styleHeight = maxHeight != null
      ? `${Math.min(textareaScrollHeight.value, maxHeight)}px`
      : `${textareaScrollHeight.value}px`

    // If style target is provided update its height
    if (_styleTarget)
      _styleTarget.style[styleProp] = styleHeight
    // else update textarea's height by updating height variable
    else
      height = styleHeight

    textarea.value.style[styleProp] = height
  }

  watch([input, textarea], () => nextTick(triggerResize), { immediate: true })

  watch(textareaScrollHeight, () => options?.onResize?.())

  useResizeObserver(textarea, ([{ contentRect }]) => {
    if (textareaOldWidth.value === contentRect.width)
      return

    tryRequestAnimationFrame(window, () => {
      textareaOldWidth.value = contentRect.width
      triggerResize()
    })
  })

  if (options?.watch)
    watch(options.watch, triggerResize, { immediate: true, deep: true })

  return {
    textarea,
    input,
    triggerResize,
  }
}

tryRequestAnimationFrame(window: Window | undefined, fn: Fn): void

Call window.requestAnimationFrame(), if not available, just call the function

Parameters:

• window any: No description
• fn any: No description

Raw JSDoc

/**
 * Call window.requestAnimationFrame(), if not available, just call the function
 *
 * @param window
 * @param fn
 */

Calls:

• window.requestAnimationFrame
• fn

Code

function tryRequestAnimationFrame(
  window: Window | undefined = defaultWindow,
  fn: Fn,
) {
  if (window && typeof window.requestAnimationFrame === 'function') {
    window.requestAnimationFrame(fn)
  }
  else {
    fn()
  }
}

Internal helpers

Declared inside another function in this file.

triggerResize(): void

Returns: void

Calls:

• toValue (from vue)
• Math.min

Internal Comments:

// If style target is provided update its height

Code

function triggerResize() {
    if (!textarea.value)
      return

    let height = ''
    const maxHeight = options?.maxHeight

    textarea.value.style[styleProp] = '1px'
    textareaScrollHeight.value = textarea.value?.scrollHeight
    const _styleTarget = toValue(options?.styleTarget)
    const styleHeight = maxHeight != null
      ? `${Math.min(textareaScrollHeight.value, maxHeight)}px`
      : `${textareaScrollHeight.value}px`

    // If style target is provided update its height
    if (_styleTarget)
      _styleTarget.style[styleProp] = styleHeight
    // else update textarea's height by updating height variable
    else
      height = styleHeight

    textarea.value.style[styleProp] = height
  }

---

Interfaces

UseTextareaAutosizeOptions

Interface Code

export interface UseTextareaAutosizeOptions extends ConfigurableWindow {
  /** Textarea element to autosize. */
  element?: MaybeRef<HTMLTextAreaElement | undefined | null>
  /** Textarea content. */
  input?: MaybeRef<string>
  /** Maximum autosized height in pixels. */
  maxHeight?: number
  /** Watch sources that should trigger a textarea resize. */
  watch?: WatchSource | MultiWatchSources
  /** 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 | undefined>
  /** Specify the style property that will be used to manipulate height. Can be `height | minHeight`. Default value is `height`. */
  styleProp?: 'height' | 'minHeight'
}

Properties

Name	Type	Optional	Description
element	MaybeRef<HTMLTextAreaElement \| undefined \| null>	✓	not shown
input	MaybeRef<string>	✓	not shown
maxHeight	number	✓	not shown
watch	WatchSource \| MultiWatchSources	✓	not shown
onResize	() => void	✓	not shown
styleTarget	MaybeRef<HTMLElement \| undefined>	✓	not shown
styleProp	'height' \| 'minHeight'	✓	not shown

UseTextareaAutosizeReturn

Interface Code

export interface UseTextareaAutosizeReturn {
  textarea: Ref<HTMLTextAreaElement | undefined | null>
  input: Ref<string>
  triggerResize: () => void
}

Properties

Name	Type	Optional	Description
textarea	Ref<HTMLTextAreaElement \| undefined \| null>	✗	not shown
input	Ref<string>	✗	not shown
triggerResize	() => void	✗	not shown

---

Generated by Syntax Scribe