search

siddharthkp / react-ui

Customisable components and primitives based on design tokens
https://react-ui.dev/
418 stars 53 forks source link

Toast component #83

Open rajat2502 opened 4 years ago

rajat2502 commented 4 years ago

A Toast component should be added to display important messages.

rubenmoya commented 4 years ago

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 commented 4 years ago

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

rajat2502 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

The landing page is hilarious :D love it!