今天來說說 primereact message 類
工作上也很常用toast來做錯誤提示
它跟Dialog常常 雙打出現
尤其Dialog 每次UI設計 提試跳一次不夠還要瘋狂跳出確認對話框
多怕別人按錯似的

=> position 訊息位置(position: fixed)
center | bottom-right | bottom-left | top-right |
top-left | top-center | bottom-center

import React, { useRef, useState } from 'react';
import { Button } from 'primereact/button';
import { Toast } from 'primereact/toast';
import { ProgressBar } from 'primereact/progressbar';

const MessageCompnent: React.FC = () => {
  const toast = useRef<any>();
  const [progress, setProgress] = useState<number>(0);
  const interval = useRef<any>();
  const clear = () => {
    setProgress(0);
    toast.current?.clear();
    clearInterval(interval.current);
    interval.current = undefined;
  };
  const show = () => {
    if (!interval.current) {
      toast.current?.show({
        summary: 'Uploading your files.',
      });
      setProgress(0);
      if (interval.current)clearInterval(interval.current);
      interval.current = setInterval(() => {
        setProgress((prevProgress) => {
          const newProgress = prevProgress + 20;
          if (newProgress >= 100) {
            clearInterval(interval.current);
            return 100;
          }
          return newProgress;
        });
      }, 1000);
    }
  };
  return (
    <div>
      <Toast
        ref={toast}
        content={({ message }) => (
          <section className="p-3 w-full " style={{ borderRadius: '5px',backgroundColor:'rgba(255,255,255,.2)' }}>
            <i className="pi pi-cloud-upload text-white " style={{fontSize:'24px'}}/>
            <div className="d-flex flex-column mb-2 w-full">
              <p className="mb-1 font-semibold text-white">{message.summary}</p>
              <p className="mb-1 ">{message.detail}</p>
              <div className="flex flex-column">
                <ProgressBar value={progress} showValue={false}></ProgressBar>
                <label className="text-right text-white" style={{fontSize:'12px'}}>{progress}% uploaded...</label>
              </div>
              <div className="d-flex mb-1">
                <Button label="Another Upload?" text className="mr-2" onClick={clear}></Button>
                <Button label="Cancel" text className="text-white ml-1" onClick={clear}></Button>
              </div>
            </div>
          </section>
        )}
      ></Toast>
      <Button onClick={show} label="View" style={{width:'200px',color:'#333'}} />
    </div>
  );
}
export default MessageCompnent;

修了一些問題
不知道為何JS 部分有宣告

const [progress, setProgress] = useState(0);
const interval = useRef(null);

轉到TS頁 就消失了

如果有寫TS 想用的要稍微注意一下
那麼今天就到這 明天見