feat(react-dom): add FadeIn

examples/visualization/src/app/layout.tsx

@@ -51,6 +51,9 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 <li>
                   <Link href="/react-dom/InView">{`<InView/>`}</Link>
                 </li>
+                <li>
+                  <Link href="/react-dom/FadeIn">{`<FadeIn/>`}</Link>
+                </li>
               </details>
             </li>
             <li>

examples/visualization/src/app/react-dom/FadeIn/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { Delay } from '@suspensive/react'
+import { FadeIn } from '@suspensive/react-dom'
+import { Spinner } from '~/components/uis'
+
+export default function Page() {
+  return (
+    <>
+      <Delay
+        ms={3000}
+        fallback={
+          <FadeIn delay={300} duration={1000}>
+            <Spinner />
+          </FadeIn>
+        }
+      >
+        Head:{' '}
+        <FadeIn as="span" duration={300}>
+          <h1>hello</h1>
+        </FadeIn>
+      </Delay>
+    </>
+  )
+}

examples/visualization/src/app/react-dom/InView/page.tsx

@@ -6,7 +6,6 @@ export default function Page() {
   return (
     <div>
       {Array.from({ length: 200 }).map((_, i) => (
-        // eslint-disable-next-line @eslint-react/no-duplicate-key
         <InView key={i} threshold={0.8} delay={200} triggerOnce initialInView>
           {({ inView, ref }) => (
             <div ref={ref}>

packages/react-dom/src/FadeIn.tsx

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ComponentPropsWithoutRef, type ElementType } from 'react'
+import { useInView } from './useInView'
+
+type FadInBaseProps = {
+  delay?: number
+  duration?: number
+  timingFunction: CSSProperties['animationTimingFunction']
+}
+type FadeInProps<TAs extends ElementType> = {
+  as?: TAs
+} & Omit<ComponentPropsWithoutRef<TAs>, 'as' | keyof FadInBaseProps> &
+  FadInBaseProps
+
+export function FadeIn<TAs extends ElementType = 'div'>({
+  as,
+  delay = 0,
+  duration = 200,
+  timingFunction = 'linear',
+  ...rest
+}: FadeInProps<TAs>) {
+  const Component = as || 'div'
+  const { inView, ref } = useInView()
+  return (
+    <Component
+      {...rest}
+      ref={ref}
+      style={{
+        opacity: inView ? 1 : 0,
+        willChange: 'opacity',
+        transition: `opacity ${duration}ms ${timingFunction} ${delay}ms`,
+      }}
+    />
+  )
+}

packages/react-dom/src/index.ts

@@ -1,2 +1,3 @@
 export { InView } from './InView'
 export { useInView } from './useInView'
+export { FadeIn } from './FadeIn'