React-toastify v – endlich einfach anzupassen

Noch nie von React-Toastify gehört? Schauen Sie sich die Demo an

Was ist neu in v11?

Ich freue mich riesig über diese Veröffentlichung! Das Hauptaugenmerk lag auf der Anpassung, und mein Ziel war es, Sie (und mich selbst) zu befähigen, das Erscheinungsbild der Benachrichtigungen vollständig zu personalisieren.

Kurz gesagt, React-Toastify sollte sich in jedes Designsystem einfügen können.

Die CSS-Datei muss nicht mehr importiert werden

Das Stylesheet wird jetzt automatisch eingefügt, sodass Sie es nicht mehr importieren müssen. Die CSS-Datei wird weiterhin von der Bibliothek exportiert.

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

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

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Einfache Anpassung!

Eine der häufigsten Anfragen war die Möglichkeit, Benachrichtigungen anzupassen. Fairerweise muss man sagen, dass es bis zu dieser Version eine ziemliche Herausforderung war, da Benutzer zahlreiche CSS-Klassen überschreiben mussten.

Ich habe die DOM-Struktur der Benachrichtigung vereinfacht, indem ich überflüssige div-Elemente, verschachtelte Elemente usw. entfernt habe. Es ist eine bedeutende bahnbrechende Änderung, aber die Mühe lohnt sich wirklich. Ich kann mit Sicherheit sagen, dass sich die Bibliothek jetzt nahtlos in jedes Designsystem integrieren lässt.

Im Folgenden habe ich ein paar verschiedene Designs nur mit Tailwind implementiert. Ich habe keine einzige CSS-Klasse von „react-toastify“ überschrieben ?!

Gehen Sie zu Stackblitz, um den Code zu überprüfen.

Wie funktioniert es in der Praxis? Auf der linken Seite haben wir die alte DOM-Struktur im Vergleich zur neuen auf der rechten Seite.

• Toastify__toast-body und sein untergeordnetes Element sind jetzt vollständig verschwunden.
• Der CloseButton verwendet jetzt eine absolute Position.

Dank dieser Änderungen werden Ihre Inhalte nicht beeinträchtigt.

Toastify__toast verfügt über einige sinnvolle Standardwerte (z. B. Randradius, Schatten usw.), die mithilfe von CSS oder durch Aktualisieren der zugehörigen CSS-Variablen angepasst werden können:

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);

Benutzerdefinierter Fortschrittsbalken

Das Zulassen eines benutzerdefinierten Fortschrittsbalkens stand überhaupt nicht auf meiner To-Do-Liste, als ich an dieser Version arbeitete. Aber als ich sah, wie einfach es jetzt ist, Benachrichtigungen anzupassen, konnte ich nicht widerstehen ?.

Das Beste daran ist, dass Sie keine Kompromisse bei Funktionen wie AutoClose, PauseOnHover, PauseOnFocusLoss oder sogar einem kontrollierten Fortschrittsbalken eingehen müssen – es funktioniert einfach reibungslos für Sie.

Hier ist eine kleine Zusammenfassung.

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

Gehen Sie zu Stackblitz, um ein Live-Beispiel zu sehen.

Barrierefreiheit und Tastaturnavigation

ToastContainer und Toast akzeptieren eine ariaLabel-Requisite (endlich...). Dies ist für Screenreader und auch zum Testen sehr hilfreich.
In Cypress könnten Sie beispielsweise cy.findByRole("alert", {name: "the aria label you selected"}) ausführen.

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

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

    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

Wenn eine Benachrichtigung sichtbar ist und der Benutzer Alt t drückt, wird der Fokus auf die erste Benachrichtigung gerichtet, sodass der Benutzer mit der Tabulatortaste durch die verschiedenen Elemente innerhalb der Benachrichtigung navigieren kann.

Die HotKeys können natürlich geändert werden.

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);

Grund für das Entfernen der Benachrichtigung mit onClose-Rückruf

Möchten Sie wissen, ob der Benutzer die Benachrichtigung geschlossen hat oder ob sie automatisch geschlossen wurde? Seien Sie versichert, das ist jetzt möglich!

Die Signatur des onClose-Rückrufs lautet jetzt onClose(reason?: boolean | string) => ungültig.

Wenn der Benutzer die Benachrichtigung schließt, ist das Argument „Grund“ gleich „wahr“. Im folgenden Beispiel habe ich mein Argument
benannt RemoveByUser, um die Absicht deutlich zu machen.

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

Wenn Sie eine benutzerdefinierte Komponente für Ihre Benachrichtigung verwenden, möchten Sie möglicherweise mehr Kontrolle über den Grund, insbesondere wenn dieser Folgendes enthält:
mehrere Call-to-Actions.

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

? Breaking Changes

useToastContainer und useToast werden nicht mehr angezeigt

Diese Hooks sind unbrauchbar, es sei denn, Sie tauchen tief in den React-Toastify-Quellcode ein, um zu verstehen, wie man Dinge zusammenhält. Das ist nicht das, was ich für meine Benutzer möchte. Es war eine schlechte Entscheidung, sie überhaupt bloßzustellen. Ich habe eine gute Lektion gelernt.

onClose und onOpen erhalten keine Kinder-Requisiten mehr

Im Nachhinein hätte ich das nie tun sollen. Die Funktion wird praktisch nicht genutzt. Unten die neue Signatur für jeden Rückruf:

• onOpen: () => ungültig
• onClose: (Grund?: boolean | string) => ungültig

Styling

• React-toastify/dist/ReactToastify.minimal.css wurde entfernt.
• Scss ist jetzt nicht mehr im Bilde. Die Bibliothek verwendet gutes altes CSS.
• bodyClassName und bodyStyle werden nicht mehr benötigt.
• progressBarStyle, um die API-Oberfläche zu reduzieren. Sie bieten jetzt eine bessere Möglichkeit, alles anzupassen, ohne sich auf den Inline-Stil verlassen zu müssen.
• injectStyle wurde entfernt. Diese Funktion wird nicht mehr benötigt.
• Die CSS-Klasse Toastify__toast-body und ihr direktes untergeordnetes Element wurden entfernt.

? Fehlerbehebungen

• Unterstützung für React19 #1177 #1185 hinzufügen
• CloseButtonProps #1165 erneut exportieren
• Reparieren Sie LatestOnTop diesmal wirklich #1176
• Dieser hässliche Fehler wird nicht mehr ausgegeben: Eigenschaften von undefiniert können nicht festgelegt werden (Einstellung „Umschalten“) #1170
• onClose-Rückruf wird nicht länger verzögert, bis die Exit-Animation #1179 abgeschlossen ist

?Was kommt als nächstes?

Ich schreibe nach und nach einen Teil der Dokumentation neu. Ich habe auf Stackblitz eine Sammlung erstellt, damit Sie alle Beispiele an einem Ort finden können. Ich werde im Laufe der Zeit weitere Beispiele hinzufügen.

Das obige ist der detaillierte Inhalt vonReact-toastify v – endlich einfach anzupassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!