React-toastify v-終於可以輕鬆自訂了

以前從未聽過react-toastify？去看看示範

v11 有什麼新功能

我對這個版本感到非常興奮！主要重點是定制，我的目標是賦予您（和我自己）權力，以便您可以完全個性化通知的外觀和感覺。

簡而言之，react-toastify 應該能夠融入任何設計系統。

不再需要導入css文件

樣式表現在會自動注入，因此您不再需要匯入它。 CSS 檔案仍然由庫匯出。

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onclick="{notify}">Notify !</button>
        <toastcontainer></toastcontainer>
      </div>
    );
  }

輕鬆訂製！

最重要的請求之一是如何自訂通知。公平地說，在這個版本之前，它非常具有挑戰性，因為它需要用戶覆蓋大量 CSS 類別。

我透過刪除無關的 div 元素、嵌套元素等簡化了通知的 DOM 結構...這是一個重大的突破性更改，但確實值得付出努力。我可以自信地說，該庫現在可以無縫整合到任何設計系統中。

下面，我只使用 Tailwind 實作了幾種不同的設計。 我沒有覆蓋react-toastify中的單一CSS類別？ ！

前往 stackblitz 查看程式碼。

它在實務上是如何運作的？左邊是舊的 DOM 結構，右邊是新的 DOM 結構。

• Toastify__toast-body 和它的孩子現在完全消失了。
• CloseButton 現在使用絕對位置。

由於這些更改，沒有任何內容會幹擾您的內容。

Toastify__toast 有一些合理的預設值（例如，邊框半徑、陰影等），可以使用 css 或透過更新關聯的 css 變數來自訂：

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

自訂進度條

在開發此版本時，允許自訂進度列根本不在我的待辦事項清單中。但看到現在自訂通知是多麼容易，我無法抗拒？ .

最好的部分是，您不必在 autoClose、pauseOnHover、pauseOnFocusLoss 甚至受控進度條等功能上做出妥協，它只是為您無縫工作。

這是一個小要點。

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onclick="{notify}">notify</button>
      <toastcontainer></toastcontainer>
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <mycustomprogressbar ispaused="{isPaused}" onanimationend="{()"> closeToast()} />
    </mycustomprogressbar>
</div>
  );
}

前往 stackblitz 查看實例。

輔助使用和鍵盤導航

ToastContainer 和 toast 接受 ariaLabel 屬性（最後......）。這對於螢幕閱讀器和測試非常有幫助。
例如，在 cypress 中，您可以執行 cy.findByRole("alert", {name: "您指定的 aria label"}).

  import { ToastContainer, toast } from 'react-toastify';

  function App(){
    const notify = () => toast("Wow so easy !");

    return (
      <div>
        <button onclick="{notify}">Notify !</button>
        <toastcontainer></toastcontainer>
      </div>
    );
  }

如果通知可見且使用者按 alt t，它將聚焦於第一個通知，允許使用者使用 Tab 瀏覽通知中的不同元素。

熱鍵當然可以更改。

width: var(--toastify-toast-width);
min-height: var(--toastify-toast-min-height);
padding: var(--toastify-toast-padding);
border-radius: var(--toastify-toast-bd-radius);
box-shadow: var(--toastify-toast-shadow);
max-height: var(--toastify-toast-max-height);
font-family: var(--toastify-font-family);

onClose 回呼通知刪除原因

您想知道用戶是否關閉了通知還是自動關閉了？請放心，這現在成為可能！

onClose 回呼的簽章現在是 onClose(reason?: boolean | string) =>無效。

當使用者關閉通知時，reason 參數等於 true。在下面的範例中，我將我的參數命名為
刪除了用戶以明確意圖。

function App() {
  const notify = () => {
    toast(CustomComponent, {
      autoClose: 8000,
      // removes the built-in progress bar
      customProgressBar: true
    });
  };

  return (
    <div>
      <button onclick="{notify}">notify</button>
      <toastcontainer></toastcontainer>
    </div>
  );
}

// isPaused is now available in your component
// it tells you when to pause the animation: pauseOnHover, pauseOnFocusLoss etc...
function CustomComponent({ isPaused, closeToast }: ToastContentProps) {
  return (
    <div>
      <span>Hello</span>
      <mycustomprogressbar ispaused="{isPaused}" onanimationend="{()"> closeToast()} />
    </mycustomprogressbar>
</div>
  );
}

如果您在通知中使用自訂元件，您可能需要更多地控制原因，特別是當它包含
多次號召性用語。

toast("hello", {
  ariaLabel: "something"
})

？重大變化

useToastContainer 和 useToast 不再公開

除非您深入研究react-toastify原始程式碼以了解如何將事物黏合在一起，否則這些鉤子是無法使用的。這不是我想要給我的用戶的，一開始曝光他們就是一個錯誤的決定，我已經吸取了很好的教訓。

onClose 和 onOpen 不再接收子屬性

事後看來，我根本不該這麼做。該功能實際上並沒有被使用。每個回調的新簽名下方：

• onOpen: () =>;無效
• onClose: (原因?: boolean | string) =>無效

造型

• React-toastify/dist/ReactToastify.minimal.css 已被刪除。
• Scss 現在已經不存在了。該庫使用了很好的舊 css。
• 不再需要 bodyClassName 和 bodyStyle。
• ProgressBarStyle 是為了減少 api 表面。它們現在是在不依賴內聯樣式的情況下自訂所有內容的更好方法。
• 注入樣式已被刪除。不再需要此功能。
• CSS 類別 Toastify__toast-body 及其直接子類別已被刪除。

？錯誤修復

• 新增對react19的支援 #1177 #1185
• 重新匯出 CloseButtonProps #1165
• 這次修復最新的OnTop #1176
• 不再拋出這個醜陋的錯誤：無法設定未定義的屬性（設定「切換」）#1170
• onClose 回呼不再延遲，直到退出動畫完成 #1179

？下一步是什麼？

我正在逐漸重寫部分文件。我在 stackblitz 上建立了一個集合，這樣您就可以在一個地方找到所有範例。我會不斷添加更多範例。

以上是React-toastify v-終於可以輕鬆自訂了的詳細內容。更多資訊請關注PHP中文網其他相關文章！