Subscribing to springs

[benwest]

Is there a general way to subscribe to changes on a spring without passing it to an animated component? I reverse-engineered this weird thing, is there a better way that I'm missing?

export const useAnimatedEffect = (value, onChange) => {
  useLayoutEffect(() => {
    const observer = {
      update() {
        onChange(value.getValue());
      }
    };
    value.addChild(observer);
    return () => value.removeChild(observer);
  }, [onChange, value]);
};

[tomdohnal]

I'm not 100% sure that I understand your use-case. Generally speaking though, you can you the onFrame property in React Spring 8 or onChange property in React Spring 9 respectively.

It's used like this:

useSpring({ from: { ... }, to: { ... },  onFrame: () => { ... } })

More on that on https://www.react-spring.io/docs/hooks/api and on https://aleclarson.github.io/react-spring/v9/breaking-changes/#The-to-prop

[benwest]

Thank you! My use case would be something like I define a spring high up in the tree, pass it down (so losing access to onFrame) and then use it to update something that's not an animated element, say a canvas. Could be a few trips through .interpolate on the way down.