fix(react-dom): add useFadeIn & convert as render prop

packages/react-dom/src/FadeIn.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import { FadeIn } from './FadeIn'
+import { mockAllIsIntersecting } from './test-utils'
+
+describe('<FadeIn/>', () => {
+  it('renders children with correct styles when in view', () => {
+    mockAllIsIntersecting(false)
+    const mockChild = vi.fn()
+    render(
+      <FadeIn duration={300} timingFunction="ease-in">
+        {(fadeIn) => (
+          <div {...fadeIn} data-testid="fade-in-child">
+            {mockChild(fadeIn.style)}
+          </div>
+        )}
+      </FadeIn>
+    )
+    expect(mockChild).toHaveBeenCalledWith({ opacity: 0, willChange: 'opacity', transition: 'opacity 300ms ease-in' })
+    mockAllIsIntersecting(true)
+    const child = screen.getByTestId('fade-in-child')
+    expect(child).toHaveStyle({ opacity: '1', willChange: 'opacity', transition: 'opacity 300ms ease-in' })
+    expect(mockChild).toHaveBeenCalledWith({ opacity: 1, willChange: 'opacity', transition: 'opacity 300ms ease-in' })
+  })
+})

packages/react-dom/src/FadeIn.test-d.tsx

@@ -1,25 +1,10 @@
-import type { CSSProperties, ComponentProps } from 'react'
-import { FadeIn } from './FadeIn'
-import type { OmitKeyof } from './utility-types'
-
-const Example1 = ({}: { x: string }) => <></>
-const Example2 = () => <></>
+import type { ComponentProps } from 'react'
+import type { FadeIn } from './FadeIn'
 
 describe('<FadeIn/>', () => {
   it('type check', () => {
-    // @ts-expect-error ts(2322)
-    ;(() => <FadeIn as="div" href="https://example.com" />)()
-    ;(() => <FadeIn as="a" href="https://example.com" />)()
-    ;(() => <FadeIn />)()
-    ;(() => <FadeIn as={Example1} x="string" />)()
-    // @ts-expect-error ts(2322)
-    ;(() => <FadeIn as={Example2} x="string" />)()
-
-    expectTypeOf<keyof ComponentProps<typeof FadeIn<typeof Example2>>>().toEqualTypeOf<
-      'root' | 'rootMargin' | 'threshold' | 'triggerOnce' | 'delay' | 'style' | 'as' | 'duration' | 'timingFunction'
-    >()
-    expectTypeOf<ComponentProps<typeof FadeIn<typeof Example2>>['style']>().toEqualTypeOf<
-      OmitKeyof<CSSProperties, 'opacity' | 'willChange' | 'transition'> | undefined
+    expectTypeOf<keyof ComponentProps<typeof FadeIn>>().toEqualTypeOf<
+      'root' | 'rootMargin' | 'threshold' | 'triggerOnce' | 'delay' | 'children' | 'duration' | 'timingFunction'
     >()
   })
 })

packages/react-dom/src/FadeIn.tsx

@@ -1,67 +1,21 @@
-import { type CSSProperties, type ComponentPropsWithoutRef, type ElementType } from 'react'
-import { InView } from './InView'
-import { type InViewOptions } from './useInView'
-import { type OmitKeyof, type Override } from './utility-types'
-
-type FadeInProps<TAs extends ElementType> = Override<
-  Override<
-    ComponentPropsWithoutRef<TAs>,
-    OmitKeyof<InViewOptions, 'fallbackInView' | 'initialInView' | 'skip' | 'onChange' | 'trackVisibility'>
-  >,
-  {
-    /**
-     * The element type to render.
-     * @default 'div'
-     */
-    as?: TAs
-    /**
-     * The style of the element.
-     */
-    style?: OmitKeyof<CSSProperties, 'opacity' | 'willChange' | 'transition'>
-    /**
-     * The duration in milliseconds of the animation.
-     * @default 200
-     */
-    duration?: number
-    /**
-     * The timing function of the animation.
-     * @default 'linear'
-     */
-    timingFunction?: CSSProperties['animationTimingFunction']
-  }
->
+import { type ReactNode } from 'react'
+import { type FadeInOptions, useFadeIn } from './useFadeIn'
 
+type FadeInProps = FadeInOptions & {
+  children: (fadeInResult: ReturnType<typeof useFadeIn>) => ReactNode
+}
 /**
  * A component that fades in when it comes into view.
  */
-export function FadeIn<TAs extends ElementType = 'div'>({
-  as,
-  style,
-  // fadeIn Options
+export function FadeIn({
   duration = 200,
   timingFunction = 'linear',
-  // inView options
   delay,
+  root,
   rootMargin,
   threshold,
   triggerOnce,
-  ...restProps
-}: FadeInProps<TAs>) {
-  const Component = as ?? 'div'
-  return (
-    <InView rootMargin={rootMargin} delay={delay} threshold={threshold} triggerOnce={triggerOnce}>
-      {({ inView, ref }) => (
-        <Component
-          {...restProps}
-          ref={ref}
-          style={{
-            ...style,
-            opacity: inView ? 1 : 0,
-            willChange: 'opacity',
-            transition: `opacity ${duration}ms ${timingFunction}`,
-          }}
-        />
-      )}
-    </InView>
-  )
+  children,
+}: FadeInProps) {
+  return <>{children(useFadeIn({ delay, duration, root, rootMargin, threshold, timingFunction, triggerOnce }))}</>
 }

packages/react-dom/src/index.ts

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

packages/react-dom/src/useFadeIn.ts

@@ -0,0 +1,49 @@
+import { type CSSProperties, useMemo } from 'react'
+import { type InViewOptions, useInView } from './useInView'
+import type { OmitKeyof } from './utility-types'
+
+export type FadeInOptions = OmitKeyof<
+  InViewOptions,
+  'fallbackInView' | 'initialInView' | 'skip' | 'onChange' | 'trackVisibility'
+> & {
+  /**
+   * The duration in milliseconds of the animation.
+   * @default 200
+   */
+  duration?: number
+  /**
+   * The timing function of the animation.
+   * @default 'linear'
+   */
+  timingFunction?: CSSProperties['transitionTimingFunction']
+}
+export function useFadeIn({
+  duration = 200,
+  timingFunction = 'linear',
+  delay,
+  root,
+  rootMargin,
+  threshold,
+  triggerOnce,
+}: FadeInOptions) {
+  const { inView, ref } = useInView({ delay, root, rootMargin, threshold, triggerOnce })
+  return useMemo<
+    Pick<ReturnType<typeof useInView>, 'ref'> & {
+      style: {
+        opacity: 0 | 1
+        willChange: 'opacity'
+        transition: `opacity ${number}ms ${Required<CSSProperties>['transitionTimingFunction']}`
+      }
+    }
+  >(
+    () => ({
+      ref,
+      style: {
+        opacity: inView ? 1 : 0,
+        willChange: 'opacity',
+        transition: `opacity ${duration}ms ${timingFunction}` as const,
+      },
+    }),
+    [inView, duration, timingFunction]
+  )
+}

packages/react-dom/src/utility-types/index.ts

@@ -1,2 +1 @@
 export type { OmitKeyof } from './OmitKeyof'
-export type { Override } from './Override'