Toast works differently with animations now

[kolorfilm]

I used@react-aria/toast the beta 3.0.0-beta.19 and @react-stately/toast 3.0.0-beta.7 and did an animation like this in my component:

<StyledToast
      data-testid="toast"
      type={content.type}
      data-animation={props.toast.animation}
      onAnimationEnd={() => {
        if (props.toast.animation === 'exiting') {
          state.remove(props.toast.key);
        }
      }}
      ref={ref}
      {...toastProps}
    >

It seems that animation + remove isn't available anymore with 3.0.0 (final version).

Any ideas what is the new way to do that? Thanks!

[snowystinger]

You should be able to reference https://react-spectrum.adobe.com/react-aria/Toast.html#animations to handle animations. You may find it easier to use RAC instead of directly using the hooks. However, this + the implementation of our RAC Toast components can serve as a guide if you want to go that route.

It may also be helpful to check out the changes we made to our components in the PR which introduced this change. https://github.com/adobe/react-spectrum/pull/7631/files#diff-a30934ef517706f5ce49b1803db6d1bad0acf3e1f013517cae32e1018b801b16L111

The main takeaway is that you no longer need to call that state.remove, and for animations you'll want to use wrapUpdate

let us know if you run into any issues.
@reidbarber please correct me if I mispoke here

[kolorfilm]

@snowystinger thanks for your feedback.

I managed to migrate it to use CSS view transitions instead and it works perfectly. 🚀 I know it is not your business, but probably it makes sense to write it in a bit more detail here. It was a hassle to figure it that the ::view-transition-... handler need to be global. That was my mistake. 😅

Anyway thanks for your detailed feedback. The reason why we using not RAC is because we want totally custom Toasts.

Thanks guys!

[snowystinger]

Yep, more documentation around it would be super helpful. would you like to contribute it?
There's a little more information here on our decision #7631 (comment)