Spring renderprops v9 without animated.* element

[sanderwapstra]

Hi! Is something like this still possible in v9?
https://codesandbox.io/s/3r6p9q361p?file=/index.js

I doesn't work when I try it like this (but is working fine when I replace CircularProgressbar with animated.div:

            <Spring
                from={{ percentage: 0 }}
                to={{ percentage: 100 }}
                config={{ duration: 3000 }}
            >
                {({ percentage }) => {
                    const rounded = Math.round(percentage);
                    return (
                        <CircularProgressbar
                            value={rounded}
                            styles={buildStyles({
                                pathTransition: 'none',
                            })}
                        />
                    );
                }}
            </Spring>

Thanks!

[aleclarson]

You need interpolation. Try this:

return (
  <CircularProgressbar
    value={percentage.to(p => Math.round(p))}
  />
)

[sanderwapstra]

Hi @aleclarson, thanks for your quick reply! That doesn't work unfortunately. Neither is this:

<div>{percentage}</div>

Or

<div>{percentage.to(p => Math.round(p))}</div>

But this is working:

<animated.div>
    {percentage.to(p => Math.round(p))}
</animated.div>

That's why I thought it has to be an animated element.

[aleclarson]

Yeah, animated.div (or a.div) is required. Sorry for the confusion!

[sanderwapstra]

Thanks for clarifying! So this does mean I can't pass the values to the react-circular-progressbar package (like the codesandbox), right?

[aleclarson]

You can wrap any component with the animated function. If it's not a primitive (eg: div), the wrapped component will render on every frame.

Here's a demo using 9.0.0-rc.3: https://codesandbox.io/s/react-spring-1005-0ld75

[sanderwapstra]

Sorry for my late reply but thanks a lot, really appreciated!