⬅️ Back to Table of Contents

📄 useResizeObserver

📊 Analysis Summary

Metric	Count
🔧 Functions	3
📦 Imports	10
🟢 Vue Composition API	2
📐 Interfaces	4
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useResizeObserver/index.ts

📦 Imports

Name	Source
ConfigurableWindow	../_configurable
Supportable	../types
MaybeComputedElementRefOrArray	../unrefElement
tryOnScopeDispose	@vueuse/shared
computed	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useSupported	../useSupported

---

Vue Composition API

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

---

Functions

useResizeObserver(target: MaybeComputedElementRefOrArray, callback: globalThis.ResizeObserverCallback, options: UseResizeObserverOptions): UseResizeObserverReturn

Reports changes to the dimensions of an Element's content or the border-box

Parameters:

• target any: No description
• callback any: No description
• options any: No description

See: https://vueuse.org/useResizeObserver

Raw JSDoc

/**
 * Reports changes to the dimensions of an Element's content or the border-box
 *
 * @see https://vueuse.org/useResizeObserver
 * @param target
 * @param callback
 * @param options
 */

Calls:

• useSupported (from ../useSupported)
• observer.disconnect
• computed (from vue)
• toValue (from vue)
• Array.isArray
• _targets.map
• unrefElement (from ../unrefElement)
• watch (from vue)
• cleanup
• observer!.observe
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)

Code

export function useResizeObserver(
  target: MaybeComputedElementRefOrArray,
  callback: globalThis.ResizeObserverCallback,
  options: UseResizeObserverOptions = {},
): UseResizeObserverReturn {
  const { window = defaultWindow, ...observerOptions } = options
  let observer: ResizeObserver | undefined
  const isSupported = useSupported(() => window && 'ResizeObserver' in window)

  const cleanup = () => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

  const targets = computed(() => {
    const _targets = toValue(target)
    return Array.isArray(_targets)
      ? _targets.map(el => unrefElement(el))
      : [unrefElement(_targets)]
  })

  const stopWatch = watch(
    targets,
    (els) => {
      cleanup()
      if (isSupported.value && window) {
        observer = new ResizeObserver(callback)
        for (const _el of els) {
          if (_el)
            observer!.observe(_el, observerOptions)
        }
      }
    },
    { immediate: true, flush: 'post' },
  )

  const stop = () => {
    cleanup()
    stopWatch()
  }

  tryOnScopeDispose(stop)

  return {
    isSupported,
    stop,
  }
}

Internal helpers

Declared inside another function in this file.

cleanup(): void

Returns: void

Calls:

• observer.disconnect

Code

() => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

stop(): void

Returns: void

Calls:

• cleanup
• stopWatch

Code

() => {
    cleanup()
    stopWatch()
  }

---

Interfaces

ResizeObserverSize

Interface Code

export interface ResizeObserverSize {
  readonly inlineSize: number
  readonly blockSize: number
}

Properties

Name	Type	Optional	Description
inlineSize	number	✗	not shown
blockSize	number	✗	not shown

ResizeObserverEntry

Interface Code

export interface ResizeObserverEntry {
  readonly target: Element
  readonly contentRect: DOMRectReadOnly
  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>
}

Properties

Name	Type	Optional	Description
target	Element	✗	not shown
contentRect	DOMRectReadOnly	✗	not shown
borderBoxSize	ReadonlyArray<ResizeObserverSize>	✗	not shown
contentBoxSize	ReadonlyArray<ResizeObserverSize>	✗	not shown
devicePixelContentBoxSize	ReadonlyArray<ResizeObserverSize>	✗	not shown

UseResizeObserverOptions

Interface Code

export interface UseResizeObserverOptions extends ResizeObserverOptions, ConfigurableWindow {
}

UseResizeObserverReturn

Interface Code

export interface UseResizeObserverReturn extends Supportable {
  stop: () => void
}

Properties

Name	Type	Optional	Description
stop	() => void	✗	not shown

---

Type Aliases

ResizeObserverCallback

/* * @deprecated This interface is now available in the DOM lib. * Use the global {@link globalThis.ResizeObserverCallback} instead. /

type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;

---

Generated by Syntax Scribe