feat(useElementVisibility): add initialValue option (#5159)

kricsleo · 9romise · web-flow · commit 13f361fab5b0 · 2025-11-26T01:35:31.000Z
Co-authored-by: Vida Xie &lt;vida_2020@163.com&gt;
diff --git a/packages/core/useElementVisibility/index.test.ts b/packages/core/useElementVisibility/index.test.ts
@@ -25,6 +25,11 @@ describe('useElementVisibility', () => {
     expect(visible.value).toBeFalsy()
   })
 
+  it('should allow set initial value', () => {
+    const visible = useElementVisibility(el, { initialValue: true })
+    expect(visible.value).toBeTruthy()
+  })
+
   describe('when internally using useIntersectionObserver', async () => {
     beforeAll(() => {
       vi.resetAllMocks()
diff --git a/packages/core/useElementVisibility/index.ts b/packages/core/useElementVisibility/index.ts
@@ -8,6 +8,12 @@ import { defaultWindow } from '../_configurable'
 import { useIntersectionObserver } from '../useIntersectionObserver'
 
 export interface UseElementVisibilityOptions extends ConfigurableWindow, Pick<UseIntersectionObserverOptions, 'threshold'> {
+  /**
+   * Initial value.
+   *
+   * @default false
+   */
+  initialValue?: boolean
   /**
    * @see https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
    */
@@ -39,8 +45,9 @@ export function useElementVisibility(
     threshold = 0,
     rootMargin,
     once = false,
+    initialValue = false,
   } = options
-  const elementIsVisible = shallowRef(false)
+  const elementIsVisible = shallowRef(initialValue)
 
   const { stop } = useIntersectionObserver(
     element,
