Toast notice 功能

讓使用者自己做了什麼動作，產生的結果是什麼，是很重要的事。在 SPA 中，因為頁面不會重整，將操作回饋給使用者特別重要。

雖然外面有許多寫好的套件可用，但要修改成自己想要的樣式反而不好改。因為套件要滿足大部份人的需求，也會有很多自己用不到的功能，造成載入資源浪費。

製作 Toast 元件

import React from 'react';

export default function Toast(props) {
    const { type, message, isActive } = props;
    return (
        <div className={`toast ${type} ${isActive ? 'isActive' : ''}`}>{message}</div>
    );
}

用 3 個參數來控制 toast：

• type：帶入到 className 供 CSS 使用。可設定 success, info ,warning, danger 等等，調整不同 toast 的顏色樣式。
• message：顯示給使用者看的訊息。
• isActive：控制 toast 出現或消失。用 CSS 判斷有無 isActive class 來設定。

在 App.js constructor 加入 toast 的 state

this.state = {
    toast: {
        type: '',
        message: '',
        isActive: false,
    },
}

在 App 元件外加入計時器

let toastTimer;

在 App.js 加入 showToast 和 hideToast 功能

showToast = (type, message, timer = 5000) => {
    clearTimeout(toastTimer);
    this.setState({
        toast: {
            type,
            message,
            isActive: true,
        },
    });
    toastTimer = setTimeout(this.hideToast, timer);
}

hideToast = () => {
    this.setState({
        toast: {
            isActive: false,
        },
    });
}

showToast 和 hideToast 控制 isActive，timer 可自訂 toast 出現持續的時間，預設為 5 秒鐘。

在 App.js render加入 Toast 元件

const { type, message, isActive } = this.state.toast;
retrun (
    <Toast
        type={type}
        message={message}
        isActive={isActive}
    />
);

讓 toast 出現！

this.showToast('success', '新增成功！');
this.showToast('danger', '進行了一個刪除的動作', 8000);

CSS：為 toast 加入樣式 (by Sass)

.toast
	position: fixed
	top: -100px
	right: 1rem
	z-index: 999
	padding: .5rem 2rem
	background-color: #fff
	color: $gray
	border-radius: 100px
	opacity: 0
	visibility: hidden
	transition: .4s
	&.isActive
		top: 1rem
		opacity: 1
		visibility: visible
	&.success
		background-color: $success
	&.info
		background-color: $info
	&.danger
		background-color: $danger
	&.warning
		background-color: $warning

success, info, danger, warning 就是 toast 的 type 參數值，用來呈現不同顏色，可以自訂無限多種樣式。