v9.0.0-rc.3 –– Questions and feedback

[aleclarson]

Go here first: v9 docs

Please leave your questions and feedback about v9.0.0-rc in this thread.

 

🐛 Bug reports deserve their own issue. Fork this sandbox to create a minimal repro.

npm install react-spring@9.0.0-rc.3 -E
# or
npm install react-spring@next -E

_{Last Updated: May 11, 2020}

 

Try the UMD bundle: https://cdn.jsdelivr.net/npm/@react-spring/web@9.0.0-rc.3/index.umd.min.js

Read the source: https://github.com/react-spring/react-spring/tree/v9.0.0-rc.3

Have any suggestions to improve the docs? Speak up here: #967

Want to write a blog post for the docs? Speak up here: #973

 

[aleclarson]

986 Unfortunately, it looks like the .cjs bundle is broken. 😢

[dagstuan]

@aleclarson I'm getting typescript errors when using RC1.

node_modules/@alloc/types/react.d.ts:1:8 - error TS1259: Module '"C:/.../node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React, { ReactElement, MutableRefObject } from 'react'

node_modules/@react-spring/core/index.d.ts:1:8 - error TS1259: Module '"C:/../@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import React, { ReactNode, RefObject } from 'react';```

[TrySound]

Shared package has circular dependencies which may lead to unwanted effect in some cases.

[!] Error: Circular dependency:
../node_modules/@react-spring/shared/esm/globals.js ->
../node_modules/@react-spring/shared/esm/FrameLoop.js ->
../node_modules/@react-spring/shared/esm/globals.js

[dagstuan]

Using event props with useTransition in 9.0.0-rc.1 seems to have no effect. At least I'm not getting anything in the console with a transition such as this one:

useTransition(items, {
  from: { opacity: 0 },
  enter: { opacity: 1 },
  leave: { opacity: 0 },
  onChange: () => console.log('change'),
  onRest: () => console.log('rest'),
  onProps: () => console.log('props'),
})

I can make a repro once #986 is fixed.

[aleclarson]

@aleclarson I'm getting typescript errors when using RC1.

I guess libraries can't use esModuleInterop or allowSyntheticDefaultImports if they emit a declaration file. 😢

See here: https://github.com/microsoft/TypeScript/issues/28009

For now, you can work around it by using esModuleInterop: true in your project's tsconfig.json.

[TrySound]

@aleclarson Named exports is recommended way to import react. Default export will be gone eventually. Import like this if jsx is used.

import * as React from 'react';
import { useState } from 'react';

[aleclarson]

9.0.0-rc.2 is now available 🚢

[smashercosmo]

I'm wondering, does v9 allow the following: transition between two routes, but second route has child elements that should animate on route enter and on route leave. And page element should only be removed from DOM, when animations of child elements finish.

[aleclarson]

@smashercosmo It's feasible, yes. You could use async to function in the leave transition to wait for animation promises passed up from the child components. If you have more questions about that particular use case, please open a discussion.

[minhtranite]

Hi, I just create a sandbox to try React Spring but got an error: Could not find module in path: 'react-spring/renderprops'

Here is the sandbox: https://codesandbox.io/s/react-spring-0bbg0?file=/src/App.js:87-98

[aleclarson]

@minhtranite See here: https://aleclarson.github.io/react-spring/v9/#Unified-API

[tim-soft]

@aleclarson thanks for the new release! In v9-beta.34, I could pass onFrame to useSpring like this

const [props, set] = useSprings(pages.length, i => ({
    x: i * window.innerWidth,
    scale: 1,
    display: 'block',
    onFrame: f => console.log(f),
    onRest: f => console.log(f)
}))

I've updated onFrame -> onChanged, but neither onChange or onRest seem to get called

const [props, set] = useSprings(pages.length, i => ({
    x: i * window.innerWidth,
    scale: 1,
    display: 'block',
    onChange: f => console.log(f),
    onRest: f => console.log(f)
}))

repro: https://codesandbox.io/s/viewpager-s2ukf?file=/src/index.js

[christianvonlehe]

I'm getting TypeScript issues when using animated(component). It complains "Type instantiation is excessively deep and possibly infinite". Is this something I'm doing wrong or is this a known issue?

[ElForastero]

Can Globals accept a default animations config?

Like:

Globals.assign({
  config: config.gentle,
});

[aleclarson]

@ElForastero No but SpringContext supports it, I think.

import { SpringContext } from 'react-spring'

<SpringContext config={config.gentle}>
  <App />
</SpringContext>

edit: Nevermind, that's not possible yet... but you'll see support for the config prop with SpringContext in v9.0.0-rc.3. Would that work for you?

[aleclarson]

9.0.0-rc.3 is now available 🚢

Notable changes

• Added config prop to SpringContext component
• Improved stability of nested async to props
• Fixed event props defined with async to prop
• Fixed return type of useSpring when to prop is possibly falsy
• Fixed integration with react-three-fiber (and upgraded to v4)

Fixed issues

• 993

• 997

• 1000

[HQ92]

Hi,

I just upgraded to rc3 and have a found a small change that messes with some of my code. I am animating springs to 0, and then in their onChange handlers triggering functions once the spring value passed into the handler displays 0. I think the reason for this was in a previous canary version onRest was not being successfully triggered for some reason, this was my way around this. What actually ends up happening is the spring gets progressively closer to 0 without actually reaching it. I think maybe there is a spring config property that maybe I'm missing or has changed?

Thanks,

[HQ92]

Hi again,

I've found a small issue with the way rc3 reacts to a spring onchange prop update when triggering a separate state update due to a drag event. I've created a repro for it and filed it under https://github.com/react-spring/react-spring/issues/1010. Hopefully its something I just need to tweak, but it was working in 808.17.

Thanks!

[KB1RMA]

When using /web.cjs I seem to be having an issue in IE11 where the element fades in, but won't fade out or unmount.

Example component that fails to "leave" in IE

import React from "react";
import { useTransition, animated } from "react-spring/web.cjs";

export default function App() {
  const [hidden, setHidden] = React.useState(false);
  const transition = useTransition(hidden, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {transition(
        (props, item) =>
          item && <animated.div style={props}>Some hide/show text</animated.div>
      )}
      <button onClick={() => setHidden(!hidden)}>Show/Hide</button>
    </div>
  );
}

Everything appears to work without issue in all other browers I've tested so I'm guessing it's just a bug. There aren't any exceptions thrown.

[tim-soft]

@KB1RMA Your best bet is to transpile react-spring for ie11 in your webpack config, pass anything in that folder (/node_modules/react-spring) thru babel-loader. There is stuff in the cjs build that is gonna break ie11. Polyfilling via babel-'s core-js setup in your app is also a given.

[KB1RMA]

@KB1RMA Your best bet is to transpile react-spring for ie11 in your webpack config, pass anything in that folder (/node_modules/react-spring) thru babel-loader. There is stuff in the cjs build that is gonna break ie11. Polyfilling via babel-'s core-js setup in your app is also a given.

I just tried that and it's still broken in the same way unfortunately! Still no console errors either - silent failure.

Edit: And yeah, everything else is all polyfilled properly - This is a pretty large project and this is my only IE11 issue. I just pulled a small reproduction out.

[aleclarson]

I just tried that and it's still broken in the same way unfortunately!

Maybe you messed up? How are you using babel-loader?

Be sure every package in node_modules/@react-spring/** is compiled. (Note the @)

[tim-soft]

@KB1RMA this way has worked for me in the past (separate loaders + unix/windows path regex) https://github.com/webpack/webpack/issues/2031#issuecomment-573271725

[KB1RMA]

Maybe you messed up? How are you using babel-loader? Be sure every package in node_modules/@react-spring/** is compiled. (Note the @)

It's most entirely possible! I'm using Nextjs and next-transpile-plugins, but it looks like the loader config it sets up should be okay. And I see transpiled code in my bundles.

Here's a CodeSandbox of essentially what I have setup: https://codesandbox.io/s/happy-breeze-p37cl?file=/next.config.js

What's throwing me is plenty of other things appear to work okay. And it does animate, it just doesn't complete or unmount. And no console errors.

[b2whats]

In the example (useTransition) https://codesandbox.io/s/fervent-wildflower-39dc9 if you look at the console, the information on transition will mislead people.

Current behavior: false "mount" -- click false "enter" true "mount" true "enter" --click true "enter" false "mount" false "enter"

We do not see leave state

Expected behavior: false "mount" false "enter" -- click false "leave" true "mount" true "enter" --click true "leave" false "mount"

[b2whats]

https://codesandbox.io/s/hungry-rgb-0w76q?file=/src/index.js

How can I reset the animation queue? Now if you click many times, the animation will be added to the queue, and then launched many times, which is an undesirable behavior

[b2whats]

The desired behavior can be achieved in this way https://codesandbox.io/s/agitated-water-7utbi but it seems that the onRest event should not be raised

these expressions are not equivalent ?

    enter: item => async (next, cancel) => {
      await next({ opacity: 1 })
    },
    ...
    enter: { opacity: 1 }

[aleclarson]

In the example (useTransition) codesandbox.io/s/fervent-wildflower-39dc9 if you look at the console, the information on transition will mislead people.

The transition phase isn't updated until the commit phase (eg: when useLayoutEffect callbacks are invoked), so its value is indeed misleading during the render phase.

https://codesandbox.io/s/hungry-rgb-0w76q?file=/src/index.js

How can I reset the animation queue? Now if you click many times, the animation will be added to the queue, and then launched many times, which is an undesirable behavior

There's currently no API to cancel a delayed update, apart from the cancel prop or stop function (named cancel in your sandbox), but that will interrupt the async function too. Not sure if there's a workaround, but maybe.

When I get a chance, I'll probably change the behavior to this: When an async animation is interrupted (eg: when leave transition starts before enter transition is done), all of its delayed updates are interrupted too. Currently, delayed updates are not associated with async animations in any way.

The desired behavior can be achieved in this way codesandbox.io/s/agitated-water-7utbi but it seems that the onRest event should not be raised

It doesn't look like you changed anything in that forked sandbox. Did you forget to save changes?

these expressions are not equivalent ?

    enter: item => async (next, cancel) => {
      await next({ opacity: 1 })
    },
    ...
    enter: { opacity: 1 }

They are mostly equivalent. When enter is a function, the onRest prop won't be called until the function exits, but (in your example) that's inconsequential.

[fozzle]

was the native prop removed from the renderprops api? Are all of them native by default now, like hooks are?

[aleclarson]

Right-o!

[b2whats]

https://github.com/react-spring/react-spring/issues/873 related issue

in ref callback on an animated component is called three times with the same node, example https://codesandbox.io/s/unruffled-cerf-orh4x?file=/src/index.js

[b2whats]

https://codesandbox.io/s/hungry-rgb-0w76q

Sorry, corrected an example to see how the animation blinks when quickly pressed many times

They are mostly equivalent. When enter is a function, the onRest prop won't be called until the function exits, but (in your example) that's inconsequential.

now you can see the difference between this example (https://codesandbox.io/s/agitated-water-7utbi) and the example above

It turns out that you can reset(fake) the animation queue and avoid blinking

[aleclarson]

873 related issue

in ref callback on an animated component is called three times with the same node, example codesandbox.io/s/unruffled-cerf-orh4x?file=/src/index.js

Not tested yet, but I think memoizing the ref function will fix it: 8ed5a42e8a762592aeddb4ce1a130af67cdfa067

That commit will be in the next RC.

[b2whats]

Thanks 🤗 is there a public commit with these changes? I could try it on my own

And why the component is unmounted, I can’t find this place in the code.

[kurosh-z]

Hi, I have an issue using useSpring in typescript. Whenever animated props are simple, like radius:number , everything works as expected. but if animated prop is an array like position:number[] , I get an typescript error :

I defined the type of animated props like this example,

type AnimatedProps = {
  position: number[];
  radius: number;
};
// in useSpring:
const [springPops, setSprops] = useSpring<AnimatedProps>(() => ({
        position: [0, 0, 0],
        radius: 0,
    }))

and wonder if I'm missing something here? sandbox : https://codesandbox.io/s/tyepechecking-react-t4ih5?file=/src/App.tsx

[moonrailgun]

Hi, the syntax for typescript incorrect in @react-spring/core@9.0.0-rc.3 at ReactNative environment.

The error report is below: if I change to

export { AnimationResult } from './AnimationResult'
export { UnknownProps } from './types/common'

It works.

What should i do or how can i resolve it?

[gtolarc]

I also experienced similar errors with react-three-fiber. @aleclarson @kurosh-z

[amadeus]

I've found a bug with React Spring rc3 that I can't figure out how to make an isolated repro for, it only seems to occur within the context of our app (Discord). The repro that I could create in our app however was spamming a bunch of hide/show events in a useTransition using mouse overs.

However, with lots of logging, experimenting and modifying of the source code, I have figured out the issue and how I think it needs to be solved.

The high level is - if a useTransition transition animation, somehow evaluates to a noop result, via this code path here:

https://github.com/react-spring/react-spring/blob/326daad613d3cd5263f94f48ed1e15c15e25eff3/packages/core/src/SpringValue.ts#L812

the onRest callback for that transition is never fired, and cleanup of the dom node never happens. I could alleviate the problem by tweaking that line to:

const result = getNoopResult(this, value);
const onRest = coerceEventProp(get('onRest'), key);
onRest != null && onRest(result);
resolve(result);

But I am not really sure if that's the correct way to fix, so figured I would post here instead.

[aleclarson]

@amadeus I cooked up a test (0133a9fdbff0ae0dfe7e171465af52d60dfb9b4e) that reproduces the issue. The resolve(getNoopResult(...)) line is only hit when the transition is idle before the leave animation starts. Will look into it deeper sometime soon. 👍

[aleclarson]

@kurosh-z @gtolarc Will take a look soon. Thanks for reporting! 💯

[Okami92]

useTransition stopped working after upgrading to this version. this is an error that I am getting:

Uncaught TypeError: Cannot destructure property 'ref' of 'props' as it is null.

const transitions = useTransition(viewMode, null, {
    from: ...,
    enter: ...,
    leave: ...,
  })

As you see, I use null as second argument. If I put ref there, it works, but makes 3 instances of animated object for some reason (should be one). Does anyone have similar problem?

[aleclarson]

@Okami92 Please see the Breaking Changes page.

[Okami92]

@aleclarson thanks, sorry, haven't seen this page.

I have a question regarding Globals -> skipAnimation: I have multistep animations on the website, and with skipAnimation enabled they immediately go to the final state without transition, as expected, but still do it in a queue. For example, I have dropdown, where firstly I remove opacity in content of it, and then collapse dropdown itself. And with disabled animation it awkwardly doing it in steps and it looks clunky. Is there a way to disable chaining with Globals also, without passing props to any component which uses chaining?

[aleclarson]

@Okami92 Can you provide a minimal repro that shows the clunkiness? You can use this template if you want. 👍

[Okami92]

@aleclarson https://codesandbox.io/s/festive-germain-rv1fb?file=/src/index.js please take a look. With disabled animations, it still waits for next turn.

[aleclarson]

@Okami92 Awesome, thanks. I'll fix it before the next release. 👍

[aamorozov]

@aleclarson Thank you for all this work! It is looking great. I've tried updating to next today(react-spring@9.0.0-rc.3) and having an issue with animating the interpolated value. Here is the sandbox - https://codesandbox.io/s/quiet-sunset-02sjn?file=/src/components/link.js. If you replace react-spring@next version of react-spring with react-spring@9.0.0-beta.5 the animation of the Link component will work smoothly. If it's on next version, it just updates to the end scale without interpolating the value.

[aleclarson]

@aamorozov Please open an issue. Thanks!

[aamorozov]

@aamorozov Please open an issue. Thanks!

@aleclarson Added one here - https://github.com/react-spring/react-spring/issues/1039

[zenios]

Hi @aleclarson has the issue with stale nodes been fixed? Also is there a chance of an rc-4? Thanks