Better ToastList's API to support adding exit animation to toasts with motion
- 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
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