How to use useChain in v9.0.0

[JakeElder]

The existing example from the docs no longer works.

I've tried a few variants ie using the [_, ref] returned from useSpring(() => {}) in the updated api like this

  const [s1, s1Ref] = useSpring(() => ({
    from: { opacity: 0 },
    to: { opacity: 1 },
  }));

  const [s2, s2Ref] = useSpring(() => ({
    from: { opacity: 0 },
    to: { opacity: 1 },
  }));

  useChain([s1Ref, s2Ref]);

This gives a type error, Type 'SpringRef<{ opacity: number; }>' is not assignable to type 'SpringRef<Lookup<any>>' and doesn't seem to work.

Is there an updated example or a recommended new way to chain animations?

I love react-spring, thank you for the work

[joshuaellis]

Can you please provide a repo of the issue you are experiencing, I'm also going to move this to a discussion because it is a question.

[JakeElder]

I'm wondering how to achieve the same result shown in the example from the existing docs. I've changed the react-spring version to 9.0.0 and it doesn't work.

https://codesandbox.io/s/sharp-smoke-2npqw?file=/src/index.js

Existing docs I'm referring to: https://www.react-spring.io/docs/hooks/use-chain

Are there updated docs?

[cbmcruz]

Not sure if this helps or not but here's a repo of everything but the chain working.

https://codesandbox.io/s/sandbox-for-react-spring-usechain-9bmse

[JakeElder]

Thanks @cbmcruz

@joshuaellis - If useChain doesn't behave as expected based on current documentation then I'd consider this a bug. I'll open another issue not phrased as a question

[cbmcruz]

Forgot to add this earlier but here is a working version using 9.0.0-rc.3

https://codesandbox.io/s/sandbox-for-react-spring-usechain-900-rc3-gihbn

[JakeElder]

@cbmcruz - Thank you, I added that example to the bug report - #1367