feat: added toast component

[anuraghazra]

No description provided.

[netlify]

Deploy preview for renderless-components ready!

Built with commit f44c1a1

https://deploy-preview-17--renderless-components.netlify.app

[navin-moorthy]

Can't we somehow utilize, onAnimationEnd from the Animation Components and make the Toast hide after that.

I haven't seen any library getting two timeouts, will try to experiment with that to see if we can remove the prop itself.

[anuraghazra]

Can't we somehow utilize, onAnimationEnd from the Animation Components and make the Toast hide after that.

I haven't seen any library getting two timeouts, will try to experiment with that to see if we can remove the prop itself.

Yeah we can do that, but there are few gotchas with that.
What we are trying to achieve is that so users have full control over all the animation logic.

So,

onAnimationEnd - would only work with CSS Animation

Then we also have to handle transition animations (react-transition-group's Transition component uses it)

onTransitionEnd - would only work with CSS Transition. (not to mention this would prevent us to add any hover effects to the component since onTransitionEnd would fire on that too)

And also note that, not all animations are CSS & Transition, there are some libraries which uses javascript animations (react-spring) and they won't work with onAnimationEnd/onTransitionEnd listeners, they have their own callback apis.
So this is why we cannot approach the onAnimationEnd method.

We can also do one thing is that totally handover the toast removing logic after animation end to user, this way we won't handle the logic but then users would have to know how things work and that they have to remove the toast after animation finishes.

[navin-moorthy]

LGTM 🎉