question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

It 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:closed
  • Created 5 years ago
  • Reactions:3
  • Comments:21 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
sohkaicommented, Oct 28, 2018

@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!

2reactions
drcmdacommented, Oct 19, 2018

@gitcoinbot still on it 😃 the component is finished, waiting for react-spring integration in Aragon.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found