⬅️ Back to Table of Contents

📄 useIntersectionObserver

📊 Analysis Summary

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

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useIntersectionObserver/index.ts

📦 Imports

Name	Source
Pausable	@vueuse/shared
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
Supportable	../types
MaybeComputedElementRef	../unrefElement
MaybeComputedElementRefOrArray	../unrefElement
noop	@vueuse/shared
notNullish	@vueuse/shared
toArray	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
computed	vue
shallowRef	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

useIntersectionObserver(target: MaybeComputedElementRefOrArray, callback: IntersectionObserverCallback, options: UseIntersectionObserverOptions): UseIntersectionObserverReturn

Detects changes to a target element's visibility.

Parameters:

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

See: https://vueuse.org/useIntersectionObserver

Raw JSDoc

/**
 * Detects changes to a target element's visibility.
 *
 * @see https://vueuse.org/useIntersectionObserver
 * @param target
 * @param callback
 * @param options
 */

Calls:

• useSupported (from ../useSupported)
• computed (from vue)
• toValue (from vue)
• toArray(_target).map(unrefElement).filter
• shallowRef (from vue)
• watch (from vue)
• unrefElement (from ../unrefElement)
• cleanup
• targets.forEach
• observer.observe
• observer.disconnect
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)

Code

export function useIntersectionObserver(
  target: MaybeComputedElementRefOrArray,
  callback: IntersectionObserverCallback,
  options: UseIntersectionObserverOptions = {},
): UseIntersectionObserverReturn {
  const {
    root,
    rootMargin,
    threshold = 0,
    window = defaultWindow,
    immediate = true,
  } = options

  const isSupported = useSupported(() => window && 'IntersectionObserver' in window)
  const targets = computed(() => {
    const _target = toValue(target)
    return toArray(_target).map(unrefElement).filter(notNullish)
  })

  let cleanup = noop
  const isActive = shallowRef(immediate)

  const stopWatch = isSupported.value
    ? watch(
        () => [targets.value, unrefElement(root as MaybeComputedElementRef), toValue(rootMargin), isActive.value] as const,
        ([targets, root, rootMargin]) => {
          cleanup()
          if (!isActive.value)
            return

          if (!targets.length)
            return

          const observer = new IntersectionObserver(
            callback,
            {
              root: unrefElement(root),
              rootMargin,
              threshold,
            },
          )

          targets.forEach(el => el && observer.observe(el))

          cleanup = () => {
            observer.disconnect()
            cleanup = noop
          }
        },
        { immediate, flush: 'post' },
      )
    : noop

  const stop = () => {
    cleanup()
    stopWatch()
    isActive.value = false
  }

  tryOnScopeDispose(stop)

  return {
    isSupported,
    isActive,
    pause() {
      cleanup()
      isActive.value = false
    },
    resume() {
      isActive.value = true
    },
    stop,
  }
}

Internal helpers

Declared inside another function in this file.

stop(): void

Returns: void

Calls:

• cleanup
• stopWatch

Code

() => {
    cleanup()
    stopWatch()
    isActive.value = false
  }

---

Interfaces

UseIntersectionObserverOptions

Interface Code

export interface UseIntersectionObserverOptions extends ConfigurableWindow {
  /**
   * Start the IntersectionObserver immediately on creation
   *
   * @default true
   */
  immediate?: boolean

  /**
   * The Element or Document whose bounds are used as the bounding box when testing for intersection.
   */
  root?: MaybeComputedElementRef | Document

  /**
   * A string which specifies a set of offsets to add to the root's bounding_box when calculating intersections.
   */
  rootMargin?: MaybeRefOrGetter<string>

  /**
   * Either a single number or an array of numbers between 0.0 and 1.
   * @default 0
   */
  threshold?: number | number[]
}

Properties

Name	Type	Optional	Description
immediate	boolean	✓	not shown
root	MaybeComputedElementRef \| Document	✓	not shown
rootMargin	MaybeRefOrGetter<string>	✓	not shown
threshold	number \| number[]	✓	not shown

UseIntersectionObserverReturn

Interface Code

export interface UseIntersectionObserverReturn extends Supportable, Pausable {
  stop: () => void
}

Properties

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

---

Generated by Syntax Scribe