Trying to upgrade from 8.0.27 -> 9.2.0

[dphildebrandt]

Really hunted around for examples, and the documentation seems pretty light, at least, it was very hard to find any transitional information from 8->9 or a record of what the API was like during 8. Anyways, I'm trying to wrap my head around this.

const [, setX] = useSpring(() => ({
  from: { x: 0 },
  to: { x: 0 },
  onFrame: (props: { x: number }) => {
    if (containerRef.current) {
      containerRef.current.scrollLeft = props.x;
    }
  },
}));

and then later

setX({
  from: { x: scrollPosition },
  to: { x: newX },
  onFrame: (props: { x: number }) => {
    if (containerRef.current) {
      containerRef.current.scrollLeft = props.x;
    }
  },
  reset: true,
  config: { friction: 60, tension: 500, velocity: 20 },
});

From what I understand, onFrame is now onChange. And I should be calling setX.start instead. But I'm getting errors surrounding the whole to/from props.

Proposed change:

setX.start({
  from: { x: scrollPosition },
  to: { x: newX },
  onChange: (props: { x: number }) => {
    if (containerRef.current) {
      containerRef.current.scrollLeft = props.x;
    }
  },
  reset: true,
  config: { friction: 60, tension: 500, velocity: 20 },
});

results in

No overload matches this call.
  Overload 2 of 4, '(props: ControllerUpdateFn<{ x: number; }>): AsyncResult<Controller<{ x: number; }>>[]', gave the following error.
    Argument of type '{ from: { x: number; }; to: { x: number; }; onChange: (props: {    x: number;}) => void; reset: boolean; config: { friction: number; tension: number; velocity: number; }; }' is not assignable to parameter of type 'ControllerUpdateFn<{ x: number; }>'.
      Object literal may only specify known properties, and 'from' does not exist in type 'ControllerUpdateFn<{ x: number; }>'.ts(2769

[joshuaellis]

I think your issue is how you're using onChange the first argument isn't props, this was documented in the changelog here and also in the props section of the docs.

In short, you might need to change:

  onChange: (props: { x: number }) => {
    if (containerRef.current) {
      containerRef.current.scrollLeft = props.x;
    }
  },

to:

  onChange: (result) => {
    if (containerRef.current) {
      containerRef.current.scrollLeft = result.value.x;
    }
  },

However, if you're still having issues, if you can make a CodeSandbox I can take a look 👍🏼

[dphildebrandt]

Ah, that's it, thank you! I was so fixated on the changes in useSpring from 8->9, I wasn't looking carefully enough at the changes to onChange from 9->9.1