Toast component
See original GitHub issueIt could be useful to have a notification “toast” component, similar to the notify feature of UIkit
.
Two components are needed:
- The toast component itself: a styled box that renders its
children
. - A manager that would position the boxes and animate their enter / leave transitions.
Questions / thoughts:
Do we want to allow users to discard them by clicking on a close button? Or by clicking directly on the message? => no behavior on press for now.
Instead of closing a message being clicked, we could emit an event so that it could do something (like macOS notifications). => no behavior on press for now.
How does it translate on small screens? Apart from the appearance, we should probably only display one at a time. => see Jouni’s comment below
About the API, an approach could be to use a provider + a function like React toastify does.
To do:
- Visual design (@jounih).
- Toast component implementation.
- Manager implementation.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:3
- Comments:21 (9 by maintainers)
Top Results From Across the Web
Building a toast component - web.dev
Toasts are non-interactive, passive, and asynchronous short messages for users. Generally they are used as an interface feedback pattern for ...
Read more >Toasts - Bootstrap
Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They're built ...
Read more >Toast - Adobe Spectrum
Toasts display brief, temporary notifications. They're meant to be noticed without disrupting a user's experience or requiring an action to be taken.
Read more >Toast - Chakra UI
The toast component is used to give feedback to users after an action has taken place.
Read more >Snackbars & toasts - Components - Material Design
They may contain a text action, but no icons. Toasts (Android only) are primarily used for system messaging. They also display at the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@drcmda Sorry for the gitcoinbot spam; we’ll snooze him again 😃. We’re a bit held up this week but saw that react-springs@6 was released last week so we’ll be migrating shortly!
@gitcoinbot still on it 😃 the component is finished, waiting for react-spring integration in Aragon.