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 />
      </div>
    );
  }

簡単カスタマイズ！

最も多いリクエストの 1 つは、通知をカスタマイズする方法です。公平を期すために言うと、このリリースまでは、ユーザーが多数の CSS クラスをオーバーライドする必要があるため、非常に困難でした。

無関係な div 要素やネストされた要素などを削除して、通知の DOM 構造を簡素化しました。これは重大な破壊的変更ですが、努力する価値は本当にあります。このライブラリはあらゆる設計システムにシームレスに統合できるようになったと自信を持って言えます。

以下では、Tailwind のみを使用していくつかの異なるデザインを実装しました。 react-toastify から CSS クラスを 1 つもオーバーライドしていません ?!

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 />
    </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()} />
    </div>
  );
}

実際の例については stackblitz にアクセスしてください。

アクセシビリティとキーボード ナビゲーション

ToastContainer とトーストは、ariaLabel prop を受け入れます (ついに...)。これは、スクリーン リーダーだけでなくテストにも非常に役立ちます。
たとえば、cypress では、cy.findByRole("alert", {name: "指定した aria ラベル"}) を実行できます。

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

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

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <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 に等しくなります。以下の例では、引数に
という名前を付けました。 意図を明確にするために、removedByUser.

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

  return (
    <div>
      <button onClick={notify}>notify</button>
      <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()} />
    </div>
  );
}

通知にカスタム コンポーネントを使用している場合、特に次の内容が含まれている場合は、理由をより詳細に制御する必要があるかもしれません
複数の行動喚起

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

?重大な変更

useToastContainer と useToast は公開されなくなりました

これらのフックは、react-toastify ソース コードを深く掘り下げて、物事を結合する方法を理解しない限り使用できません。これは私がユーザーに望んでいることではありません。そもそもユーザーを公開するのは間違った決断でした。私は良い教訓を学びました。

onClose と onOpen は子プロパティを受け取らなくなりました

今にして思えば、こんなことをすべきではなかった。この機能は実際には使用されていません。各コールバックの新しい署名の下:

• onOpen: () =>無効
• onClose: (理由?: ブール値 | 文字列) =>無効

スタイリング

• 反応する-toastify/dist/ReactToastify.minimal.css は削除されました。
• Scss は今や問題外です。ライブラリは古き良き CSS を使用しています。
• bodyClassName と bodyStyle は必要なくなりました。
• progressBarStyle を使用して API サーフェスを削減します。インライン スタイルに依存せずにすべてをカスタマイズするためのより良い方法になりました。
• injectStyle が削除されました。この機能は不要になりました。
• CSS クラス Toastify__toast-body とその直接の子は削除されました。

?バグ修正

• react19 #1177 #1185 のサポートを追加
• CloseButtonProps を再エクスポート #1165
• 今回は実際にnewestOnTopを修正 #1176
• この醜いエラーはもうスローされません: 未定義のプロパティを設定できません (「トグル」を設定) #1170
• onClose コールバックは、終了アニメーションが完了するまで遅延しなくなりました #1179

?次は何ですか?

ドキュメントの一部を徐々に書き直しています。 stackblitz にコレクションを作成しました。これにより、すべての例を 1 か所で見つけることができます。今後も例を追加していきます。

以上がReact-toastify v - ようやくカスタマイズが簡単になりましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。