加入 Google Sign in 和 Login with Facebook 在 React + Django 專案上
開發流程 先到 Google Cloud Platform 和 Facebook for Developers …
讓使用者自己做了什麼動作,產生的結果是什麼,是很重要的事。在 SPA 中,因為頁面不會重整,將操作回饋給使用者特別重要。
雖然外面有許多寫好的套件可用,但要修改成自己想要的樣式反而不好改。因為套件要滿足大部份人的需求,也會有很多自己用不到的功能,造成載入資源浪費。
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:
this.state = {
toast: {
type: '',
message: '',
isActive: false,
},
}
let toastTimer;
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 秒鐘。
const { type, message, isActive } = this.state.toast;
retrun (
<Toast
type={type}
message={message}
isActive={isActive}
/>
);
this.showToast('success', '新增成功!');
this.showToast('danger', '進行了一個刪除的動作', 8000);
.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 參數值,用來呈現不同顏色,可以自訂無限多種樣式。