I am trying to sort out some performance problems in an image slider and I have discovered that using animated.img yields much better performance than using animated.div with some react component inside.
The react component obviously isn't just placed inside for the fun of it, but luckily react-spring lets you animate a custom component by doing
const AnimatedComponent = animated(Component)
as per the docs
But how do I use it? I have been trying but typescript just gives some really unhelpful message about missing 269 different types of props.
EDIT added error
The typescript error is shown by vscode, but it might not be important. Since I have no idea what props to pass in order to animate the component I am not surprised that it does not work, but the error message is not really helping in determining what I need to do.
' is missing the following properties from type 'AnimatedProps<{ title: string | FluidValue<string, any>; id: string | FluidValue<string, any>; article?: { title: string; metaTitle: string; metaDescription: string; description: string; showRelatedArticles: boolean; elements: ({ ...; } | ... 4 more ... | { ...; })[]; } | null | undefined; ... 269 more ...; key?: st...': title, id, slot, animate, and 257 more.ts(2740)
I stripped some of the first props since I recognise them from the component I am trying to animate and I know that they are present.
Have someone tried using this? An example of how to use it would be really nice.
I am on the 9.0.0-rc.3 version of react-spring if that matters.
Just to start the conversation.
Let's start with the documentation's example. Let's suppose you have a third party Donut component. It has a percent property. And you want to animate based on this property. So you can use animated as a wrapper around Donut.
const AnimatedDonut = animated(Donut)
// ...
const props = useSpring({ value: 100, from: { value: 0 } })
return <AnimatedDonut percent={props.value} />
Is it where the problem occurs?