javascripttypescriptreact-spring

@react-spring/web + children not defined


Running into this strange error using @react-spring/web

import { PropsWithChildren, ReactNode } from 'react'
import { useSpring, animated } from '@react-spring/web'
import useMeasure from 'react-use-measure'

export interface ExpandableCardProps {
    open: boolean
    content: ReactNode
}

export function ExpandableCard({ open, content, children, ...rest }: PropsWithChildren<ExpandableCardProps>) {
    const [ref, { height }] = useMeasure()

    const slideAnimation = useSpring({
        height: open ? height : 0,
        config: {
            tension: 500,
            friction: 50,
        },
    })

    return (
        <div className="shadow-md flex flex-col rounded-size-6 bg-[var(--bg-secondary)] overflow-hidden" {...rest}>
            <div className="rounded-size-6 bg-[var(--bg-primary)] shadow-xs">{children}</div>

Type '{ children: Element; style: { overflow: "hidden"; height: SpringValue<number>; }; }' is not assignable to type 'IntrinsicAttributes & AnimatedProps<{ style?: { accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; alignItems?: AlignItems | undefined; ... 841 more ...; matrix3d?: readonly [...] | undefined; } | undefined; }> & { ...; }'.
  Property 'children' does not exist on type 'IntrinsicAttributes & AnimatedProps<{ style?: { accentColor?: AccentColor | undefined; alignContent?: AlignContent | undefined; alignItems?: AlignItems | undefined; ... 841 more ...; matrix3d?: readonly [...] | undefined; } | undefined; }> & { ...; }'

            <animated.div style={{ ...slideAnimation, overflow: 'hidden' }}>
                <div ref={ref} className="rounded-b-size-6">
                    {content}
                </div>
            </animated.div>
        </div>
    )
}

Everytime I try to import animated or a I get the same issue


Solution

  • This is a reported bug in @react-spring/web that is still open at the time of writing.

    Deftunk recommends creating a custom.d.ts file and overriding the type:

    import reactSpring from "@react-spring/web";
    declare module "@react-spring/web" {
      const animated = {
        children: React.ReactNode,
        ...reactSpring.animated,
      };
    }