How to best deal with composite animated components?

[danielbalog]

I've been using react-spring v9 rc3 for a while now, and while I think it is fantastic in combination with gestures, I also think that most of the examples I've found are focused on single component interactions.

I would like to figure out how to deal with composite components.

So I have an animated graph component that also paints some ticks at the bottom. The ticks are a separate component, because I want to re-use them.

I want to be able to set the x-position of the graph using gestures. This should in turn should also update the ticks.

The issue I'm having is that if I want to use the "fast" version of useSpring, I can't use react state, because this would cause a virtual dom re-render, which is slow.

But if I don't use react-state I have no way of updating the position of my ticks because I can't use props.

Is there a way around this?

[aleclarson]

You can create a SpringValue and provide it to both components via React context or a shared module.

import { SpringValue } from 'react-spring'

const graphX = new SpringValue(0)

// When your drag gesture updates:
graphX.set(computeGraphXFromDragMath())

The graphX object can be used by animated primitives or by other useSpring calls.

[danielbalog]

Oh wow I didn't realize this was possible! I've got to try this out.

Thanks!
👍

[benwest]

I think you want to pass a function to useSpring:

const [props, set, stop] = useSpring(() => ({opacity: 1}))

set updates the spring without a React render.

https://www.react-spring.io/docs/hooks/use-spring