[Question] react-spring compatibility

[a-type]

Spent a while trying to get this library to work with @react-spring/three, but no changes were being applied. So I dug in the code a bit and realized you're using an imperative handle to provide a custom ref interface that looks quite a lot like a DOM node.

So I switched over to @react-spring/web, and now animations appear to work! But I have some concerns about compatibility, so I figured I'd open this issue to see if this was intentional and how reliable the pairing will be in the future.

[bbohlender]

wdym with compatibility? Did you manage to get actual spring values to be provided as uikit props? Since currently most people just use signals as the interface between react-spring and react-three/uikit (which works fine but requires a custom hook for syncing the spring value to the signal)

[a-type]

Yeah I genuinely just imported @react-spring/web, wrapped animated(Container), and passed in springs to style props, and it worked. I assume because the web target driver uses setStyle/getComputedStyle, and your refs support that interface.

Sounds like this was maybe accidental! But it does seem to work just fine, at least so far.

[Ledzz]

@a-type note that when using setStyle is a bit slower than passing value as a signal and you may experience some performance degradation 🙂

[wrangelvid]

Internally, we have a useSpringSignal hook that creates a signal and syncs it with a SpringValue.

Here is the barebones version of it.

export function useSpringSignal<T>(
    initial: Exclude<T, object>,
    props?: SpringUpdate<T>,
) {
    const signal = useSignal(initial);
    const springValue = useSpringValue(initial, props);

    // Sync the spring value with the signal.
    useFrame(() => {
        signal.value = springValue.get();
    });

    return [signal, springValue] as const;
}

Although, I am not sure if using the useFrame loop or passing an onChange event to the spring value is more efficient.

[bbohlender]

should be the same (onChange or useFrame)

your code shows the correct way of doing this!