How to use Spring from renderprops in v9?

[flashblaze]

Hi everyone. I'm using version 8.0.27 and using Spring from renderprops which is working fine and is returning only the values from the props as you can see in the console.log()

CodeSandbox: https://codesandbox.io/s/peaceful-paper-161f5

After upgrading to version 9.1.1, the props contain SpringValue instead of changed values. Any way to achieve the same result as above?

CodeSandbox: https://codesandbox.io/s/fervent-hooks-u66g6

Thanks

[joshuaellis]

AFAIK you just need to use the animated component, like animated.div

[flashblaze]

Thanks for the help. This seems to work

CodeSandbox: https://codesandbox.io/s/green-snow-6n8ue

[rafal-zelek]

@joshuaellis what if I want to use an svg library that I cannot update to animated.*? Is there a way to use render props then?

[joshuaellis]

@joshuaellis what if I want to use an svg library that I cannot update to animated.*? Is there a way to use render props then?

Animated is a HOC so you can normally wrap it 🤔 but I haven't done it myself yet.

[rafal-zelek]

I figured it out! 🍹
I wanted to wrap visx chart to have an animation of gentle data entrance from the bottom.
I'm not 100% sure what happened under the hood when I wrapped the library components, but basically this worked:
I instantiated Spring component

      <Spring to={{ fraction: 1 }} from={{ fraction: 0 }}>
        {({ fraction }) => {
....
        }</>

fraction is an instance of SpringValue and to use it I had to wrap the visx library components into animated like Below:

const AreaClosedAnimated = animated(AreaClosed);
const LinePathAnimated = animated(LinePath);
const AreaMarkerAnimated = animated(AreaMarker);

I found that in your tests, so thanks for that :)

Now to animate a line path I used fraction like that:

              <LinePathAnimated
                data={data}
                x={d => xScale(d.x) ?? 0}
                y={fraction.to(f => d =>
                  yScale(d.y * f) ?? 0
                )}
              />

To do that for visx multiple AreaMarkers mapped over the data array like that:

{data.map((d, i) => {
                const cx = xScale(getX(d)) ?? 0;
                const cy = fraction.to(f => {
                  return yScale(getY(d) * f) ?? 0;
                });
                return (
                  <AreaMarkerAnimated
                    key={`area-marker-${i}`}
                    value={d.y.toFixed(0)}
                    cx={cx}
                    cy={cy}
                  />
                );
              })}