@@ -82,7 +98,11 @@ export function useToast() {
const showToast = (props: Omit) => {
const id = Math.random().toString(36).substring(2, 11)
- setToasts(prev => [...prev, { id, props }])
+ setToasts(prev => {
+ const newToasts = [...prev, { id, props }]
+ // 限制最多顯示 5 個通知,移除最舊的
+ return newToasts.length > 5 ? newToasts.slice(-5) : newToasts
+ })
}
const hideToast = (id: string) => {
@@ -91,10 +111,12 @@ export function useToast() {
const ToastContainer = () => (
<>
- {toasts.map(({ id, props }) => (
+ {toasts.map(({ id, props }, index) => (
hideToast(id)}
/>
))}