自我挑戰的第三十天之一，用土司做為結尾感覺就香香的。

Day30-1: 吐司(Toasts)

Toasts是一個在頁面上小小的彈出視窗，他不像前面提到的Modal會打斷使用者的操作，通常會出現在頁面的四周，作為彈出提示來使用。

• Toasts顯示簡短的臨時通知，不過度干擾User，不需要強迫User對Toast採取行動或回應。
• Toasts大部份都是會在數秒後自動消失的，當你想要一直提醒User某項訊息時，不要使用會自動消失的Toasts，以防User會錯過該訊息（但請確保當User不想看到Toasts時可以手動關掉它）。
• 請盡量讓你的Toasts訊息言簡意賅，正確而直接地傳達訊息。
• 多個Toast可以同時出現，把他們疊再一起的同時，請注意最新的Toast會在最上面。
• Toasts通常用在四種情況下(info、success、warning、error)使用。

下面這張圖就是Toasts可能會呈現的樣子：

圖片來源：Darshan Gajara

補充：其實還有另一個東西叫Snackbar，有些地方會把它和Toasts分開來討論，如果你想要製作的效果用Toasts的效果做不出來，也可以試著搜搜Snackbar的關鍵字。

但在w3schools這篇教你如何製作Snackbar/toasts是把它放在一起的
https://www.w3schools.com/howto/howto_js_snackbar.asp

最後一樣是可以直接使用的補充資源：

• Bootstrap的Toasts
• Bootstrap(React)版本的Toasts
• Github上的jquery toast plugin

React相關的npm package

• https://www.npmjs.com/package/react-toastify
• https://www.npmjs.com/package/react-toast
• https://www.npmjs.com/package/react-hot-toast
• https://www.npmjs.com/package/toastify-js