Toast component

[rajat2502]

A Toast component should be added to display important messages.

[rubenmoya]

We already have an Alert component which follows accessibility rules to display messages to the user.

What are you missing in that component? Or whats the difference with a Toast component? The main thing I can think of is the positioning on the screen and hiding it after some delay, that's something we could fix by adding more examples to the docs.

What do you think?

[siddharthkp]

I'm thinking of this as a notification component. Similar to Alert but with a nicer API for stacking, dismissing, etc.

[rajat2502]

I'm thinking of this as a notification component. Similar to Alert but with a nicer API for stacking, dismissing, etc.

Yeah! that's exactly what I meant.

[codebender828]

Hey, @siddharthkp @rajat2502 !

Chakra UI is doing something similar around this approach. It uses toasted-notes to handle the stacking and dismissing API. You can use this if you don't want to have to build it from scratch. It also supports a render callback so you can pass in what ever components you like and it will render them.

So in order to achieve this, Chakra is rendering the Alert component inside of toasted-notes' render callback.

[siddharthkp]

Fun to see you here @codebender828 👋 Great work on chakra-vue!

That's a great library! I want to build a custom implementation just to learn how the API can work :) Definitely, going to definitely reference toasted-notes while building it

[codebender828]

The pleasure is mine @siddharthkp ! 🙏🏽😀 Love what you're doing as well with react-ui. Was so energized by your work and learned a lot. Hope to continue learning from you! :D

Awesome! I think you'll have a great time working with toasted notes. 😄 I referenced it as well to make something like it for Vue.js. Called it breadstick.

Cheers!

[siddharthkp]

The landing page is hilarious :D love it!