Merge pull request #192 from motiondivision/feat/use-inview

update useInView to accept root as MaybeRef

Author: rick-hup

packages/motion/src/utils/use-in-view.ts

@@ -1,19 +1,24 @@
-import type { Ref } from 'vue'
 import { ref, unref, watchEffect } from 'vue'
 import type { Options } from '@/types/state'
 import { inView } from 'framer-motion/dom'
-import type { MaybeRef } from '@vueuse/core'
+import { type MaybeComputedElementRef, type MaybeRef, unrefElement } from '@vueuse/core'
 
-export function useInView<T extends Element = any>(
-  domRef: Ref<T | null>,
-  options?: MaybeRef<Options['inViewOptions']>,
+type InViewOptions = Options['inViewOptions']
+export interface UseInViewOptions extends Omit<InViewOptions, 'root'> {
+  root?: MaybeRef<Element | Document>
+}
+
+export function useInView(
+  domRef: MaybeComputedElementRef,
+  options?: MaybeRef<UseInViewOptions>,
 ) {
   const isInView = ref(false)
 
   watchEffect((onCleanup) => {
     const realOptions = unref(options) || {}
     const { once } = realOptions
-    if (!domRef.value || (once && isInView.value)) {
+    const el = unrefElement(domRef)
+    if (!el || (once && isInView.value)) {
       return
     }
     const onEnter = () => {
@@ -24,7 +29,10 @@ export function useInView<T extends Element = any>(
             isInView.value = false
           }
     }
-    const cleanup = inView(domRef.value, onEnter, realOptions)
+    const cleanup = inView(el, onEnter, {
+      ...realOptions,
+      root: unref(realOptions.root),
+    })
     onCleanup(() => {
       cleanup()
     })