adobe / adobe/react-spectrum

Better ToastList's API to support adding exit animation to toasts with motion

Open
#9,056 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the feature here

The current API of [ToastRegion](https://react-spectrum.adobe.com/react-aria/Toast.html) (and ToastList) is hard to add exit animation with [motion](https://motion.dev/docs/react).

The key conflict is that motion requires animated elements must be wrapped by `` directly, to play exit animation before elements unmounting. But ToastList wraps all toasts with a `

    ` element now without an API to customize the wrapper.

    ### 🤔 Expected Behavior?

    Can use motion's declarative API animate toasts easily.

    ### 😯 Current Behavior

    It's impossible (as far as I know) to add exit animation to toasts with motion.

    ### 💁 Possible Solution

    _No response_

    ### 🔦 Context

    Animate toasts' exiting with motion.

    ### 💻 Examples

    ```jsx
    {/* not working */}


    {({ toast }) => (



    {toast.content.title}
    {toast.content.message}






    )}

    ```

    or

    ```jsx

    {/* not working */}


    {({ toast }) => (



    {toast.content.title}
    {toast.content.message}






    )}

    ```

    ### 🧢 Your Company/Team

    _No response_

    ### 🕷 Tracking Issue

    _No response_

Contributor guide

Open the contributing guide

Research direction

Start by reading the ToastRegion and ToastList APIs referenced in the issue, then reproduce the two motion examples to confirm how the current wrapper prevents exit animation. Done means the API supports declarative toast exit animations with motion while preserving the existing toast behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.