fix(useElementVisiblity): can configurable threshold (#3715)

Co-authored-by: Doctor Wu <44631608+Doctor-wu@users.noreply.github.com>
vueuse · Feb 20, 2024 · ce9bbec · ce9bbec
1 parent 9a47a72
commit ce9bbec
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/core/useElementVisibility/index.test.ts b/packages/core/useElementVisibility/index.test.ts
@@ -19,6 +19,12 @@ describe('useElementVisibility', () => {
     expect(visible.value).toBeFalsy()
   })
 
+  it('should work when threshold is undefined', () => {
+    // @ts-expect-error set threshold null
+    const visible = useElementVisibility(el, { threshold: null })
+    expect(visible.value).toBeFalsy()
+  })
+
   describe('when internally using useIntersectionObserver', async () => {
     beforeAll(() => {
       vi.resetAllMocks()

diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
@@ -1,11 +1,12 @@
 import type { MaybeRefOrGetter } from '@vueuse/shared'
 import { ref } from 'vue-demi'
 import type { MaybeComputedElementRef } from '../unrefElement'
+import type { UseIntersectionObserverOptions } from '../useIntersectionObserver'
 import { useIntersectionObserver } from '../useIntersectionObserver'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
-export interface UseElementVisibilityOptions extends ConfigurableWindow {
+export interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
   scrollTarget?: MaybeRefOrGetter<HTMLElement | undefined | null>
 }
 
@@ -18,7 +19,7 @@ export function useElementVisibility(
   element: MaybeComputedElementRef,
   options: UseElementVisibilityOptions = {},
 ) {
-  const { window = defaultWindow, scrollTarget } = options
+  const { window = defaultWindow, scrollTarget, threshold = 0 } = options
   const elementIsVisible = ref(false)
 
   useIntersectionObserver(
@@ -39,7 +40,7 @@ export function useElementVisibility(
     {
       root: scrollTarget,
       window,
-      threshold: 0,
+      threshold,
     },
   )