feat(react-dom): add inViewOptions as FadeInProps

toss · Nov 19, 2024 · c581697 · c581697
1 parent 1e1238f
commit c581697
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/examples/visualization/src/app/react-dom/FadeIn/page.tsx b/examples/visualization/src/app/react-dom/FadeIn/page.tsx
@@ -39,7 +39,7 @@ export default function Page() {
               key={userId}
               clientOnly
               fallback={
-                <FadeIn delay={200} duration={1000}>
+                <FadeIn delay={200} duration={1000} inViewOptions={{ triggerOnce: true }}>
                   {skeleton}
                 </FadeIn>
               }

diff --git a/packages/react-dom/src/FadeIn.tsx b/packages/react-dom/src/FadeIn.tsx
@@ -1,5 +1,5 @@
 import { type CSSProperties, type ComponentPropsWithoutRef, type ElementType } from 'react'
-import { useInView } from './useInView'
+import { type InViewOptions, useInView } from './useInView'
 
 type FadeInProps<TAs extends ElementType> = ComponentPropsWithoutRef<TAs> & {
   /**
@@ -18,17 +18,19 @@ type FadeInProps<TAs extends ElementType> = ComponentPropsWithoutRef<TAs> & {
    * The timing function of the animation.
    */
   timingFunction?: CSSProperties['animationTimingFunction']
+  inViewOptions?: InViewOptions
 }
 
 export function FadeIn<TAs extends ElementType = 'div'>({
   as,
   delay = 0,
   duration = 200,
   timingFunction = 'linear',
+  inViewOptions,
   ...rest
 }: FadeInProps<TAs>) {
   const Component = as ?? 'div'
-  const { inView, ref } = useInView()
+  const { inView, ref } = useInView(inViewOptions)
   return (
     <Component
       {...rest}