Toast
Code
| 1 | <AnimePresence mode="popLayout"> |
| 2 | {toasts.map((t) => ( |
| 3 | <AnimePresenceChild |
| 4 | key={t.id} |
| 5 | enter={{ opacity: [0, 1], translateX: [40, 0], scale: [0.9, 1] }} |
| 6 | exit={{ opacity: [1, 0], translateX: [0, 40], scale: [1, 0.9] }} |
| 7 | duration={300} |
| 8 | ease="outExpo" |
| 9 | > |
| 10 | <Toast onDismiss={() => dismiss(t.id)}>{t.msg}</Toast> |
| 11 | </AnimePresenceChild> |
| 12 | ))} |
| 13 | </AnimePresence> |
Stacked notifications with enter/exit animations and auto-dismiss.
Live preview
ToastClick to push a notification
No notifications
Props
| Name | Type | Default | Description |
|---|---|---|---|
| mode | 'sync'|'wait'|'popLayout' | 'popLayout' | Exit sequencing |
| enter | UseAnimeOptions | - | Enter keyframes per child |
| exit | UseAnimeOptions | - | Exit keyframes per child |
| duration | number | 300 | Enter/exit ms |
| ease | string | 'outExpo' | Easing curve |