feat(useIntersectionObserver): support for Pausable interface (#2883)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

Author: Mini-ghost

packages/core/useIntersectionObserver/demo.vue

@@ -6,7 +6,7 @@ const root = ref(null)
 const target = ref(null)
 const isVisible = ref(false)
 
-useIntersectionObserver(
+const { isActive, pause, resume } = useIntersectionObserver(
   target,
   ([{ isIntersecting }]) => {
     isVisible.value = isIntersecting
@@ -16,6 +16,15 @@ useIntersectionObserver(
 </script>
 
 <template>
+  <div class="text-center">
+    <label class="checkbox">
+      <input
+        :checked="isActive" type="checkbox" name="enabled"
+        @input="($event.target as HTMLInputElement)!.checked ? resume() : pause() "
+      >
+      <span>Enable</span>
+    </label>
+  </div>
   <div ref="root" class="root">
     <p class="notice">
       Scroll me down!
@@ -40,7 +49,7 @@ useIntersectionObserver(
 .root {
   border: 2px dashed #ccc;
   height: 200px;
-  margin: 0 2rem 1rem;
+  margin: 2rem 1rem;
   overflow-y: scroll;
 }
 .notice {

packages/core/useIntersectionObserver/index.ts

@@ -1,4 +1,6 @@
-import { watch } from 'vue-demi'
+import type { Ref } from 'vue-demi'
+import { ref, watch } from 'vue-demi'
+import type { Pausable } from '@vueuse/shared'
 import { noop, tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
@@ -7,6 +9,13 @@ import { unrefElement } from '../unrefElement'
 import { useSupported } from '../useSupported'
 
 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.
    */
@@ -23,6 +32,11 @@ export interface UseIntersectionObserverOptions extends ConfigurableWindow {
   threshold?: number | number[]
 }
 
+export interface UseIntersectionObserverReturn extends Pausable {
+  isSupported: Ref<boolean>
+  stop: () => void
+}
+
 /**
  * Detects that a target element's visibility.
  *
@@ -35,34 +49,36 @@ export function useIntersectionObserver(
   target: MaybeComputedElementRef,
   callback: IntersectionObserverCallback,
   options: UseIntersectionObserverOptions = {},
-) {
+): UseIntersectionObserverReturn {
   const {
     root,
     rootMargin = '0px',
     threshold = 0.1,
     window = defaultWindow,
+    immediate = true,
   } = options
 
   const isSupported = useSupported(() => window && 'IntersectionObserver' in window)
 
   let cleanup = noop
+  const isActive = ref(immediate)
 
   const stopWatch = isSupported.value
     ? watch(
-      () => ({
-        el: unrefElement(target),
-        root: unrefElement(root),
-      }),
-      ({ el, root }) => {
+      () => [unrefElement(target), unrefElement(root), isActive.value] as const,
+      ([el, root]) => {
         cleanup()
 
+        if (!isActive.value)
+          return
+
         if (!el)
           return
 
         const observer = new IntersectionObserver(
           callback,
           {
-            root,
+            root: unrefElement(root),
             rootMargin,
             threshold,
           },
@@ -74,21 +90,28 @@ export function useIntersectionObserver(
           cleanup = noop
         }
       },
-      { immediate: true, flush: 'post' },
+      { 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,
   }
 }
-
-export type UseIntersectionObserverReturn = ReturnType<typeof useIntersectionObserver>