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