React-spring: Keyframes typescript usage

[jmcbee]

This could be a potential bug or I'm just missing something.

https://codesandbox.io/s/w7mjpk6455

The code:

import { animated, config, Keyframes, Trail, Transition } from "react-spring";

const LoadingWrapper = Keyframes.Trail(async (done: any) => {
  while (true) {
    await done({
      from: { background: "#191e23" },
      to: { background: "#303a44" }
    });
    await done({
      from: { background: "#303a44" },
      to: { background: "#191e23" }
    });
  }
});

function App() {
  return (
    <div className="App">
      <LoadingWrapper items={[1, 2, 3, 4]}>
        {(item: any) => (props: any) => (
          <div className="item" style={props}>
            Hi
          </div>
        )}
      </LoadingWrapper>
    </div>
  );
}

The error

/private/tmp/hmm/src/index.tsx
Type error: Type '{ children: (item: any) => (props: any) => Element; items: number[]; }' is not assignable to type 'IntrinsicAttributes & object'.
  Property 'items' does not exist on type 'IntrinsicAttributes & object'.  TS2322

    21 |   return (
    22 |     <div className="App">
  > 23 |       <LoadingWrapper items={[1, 2, 3, 4]}>
       |        ^
    24 |         {(item: any) => (props: any) => (
    25 |           <div className="item" style={props}>
    26 |             Hi

It runs fine on codesandbox but I can't compile it when you try to get a zip and try it locally.

[drcmda]

All of TS is by contribution, could you look into the definitions and see if it's properly defined? And if not make a PR? I don't know TS good enough myself.

[aleclarson]

@radudascaluntt made the typings for the Keyframes class. Maybe he/she can explain this. I would also like to know what S and DS are meant to represent.

https://github.com/react-spring/react-spring/blob/45db119709bac7a70022485719d3d69a402b441a/types/renderprops-universal.d.ts#L272-L303

[aleclarson]

Closing this since Keyframes is about to be a legacy API.

[barns-unmind]

Hi @aleclarson, looking at the demos react-spring looks fully awesome. With Keyframes becoming legacy what should we use instead for multi stage animations?

[aleclarson]

I think async to prop is the replacement.

to: async next => {
  await next({ foo: 1 }) // keyframe 1
  await next({ foo: 2 }) // keyframe 2
},
// ..or..
to: [{ foo: 1 }, { foo: 2 }],

Maybe useKeyframes would be a good addition, though. 🤔