React-toastify v- enfin facile à personnaliser

Vous n'avez jamais entendu parler de React-Toastify auparavant ? Allez voir la démo

Quoi de neuf dans la v11

Je suis super excité par cette sortie ! L'accent principal était mis sur la personnalisation, et mon objectif était de vous donner (et moi-même) les moyens de personnaliser entièrement l'apparence des notifications.

En bref, React-toastify devrait pouvoir se fondre dans n'importe quel système de conception.

Plus besoin d'importer le fichier CSS

La feuille de style est désormais injectée automatiquement, vous n'avez donc plus besoin de l'importer. Le fichier CSS est toujours exporté par la bibliothèque.

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

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

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

Personnalisation facile !

L'une des principales demandes concernait la personnalisation des notifications. Pour être honnête, jusqu'à cette version, c'était assez difficile car cela obligeait les utilisateurs à remplacer de nombreuses classes CSS.

J'ai simplifié la structure DOM de la notification en supprimant les éléments div superflus, les éléments imbriqués, etc... C'est un changement important, mais cela en vaut vraiment la peine. Je peux affirmer avec confiance que la bibliothèque peut désormais s'intégrer de manière transparente dans n'importe quel système de conception.

Ci-dessous, j'ai implémenté quelques conceptions différentes en utilisant uniquement Tailwind. Je n'ai pas remplacé une seule classe CSS de React-toastify ?!

Rendez-vous sur stackblitz pour vérifier le code.

Comment ça marche en pratique ? Sur le côté gauche, nous avons l'ancienne structure DOM contre la nouvelle sur le côté droit.

• Toastify__toast-body et son enfant ont maintenant complètement disparu.
• Le CloseButton utilise désormais une position absolue.

Grâce à ces changements, rien n'interférera avec votre contenu.

Toastify__toast a des valeurs par défaut raisonnables (par exemple, border-radius, shadow, etc...) qui peuvent être personnalisées à l'aide de CSS ou en mettant à jour les variables CSS associées :

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

Barre de progression personnalisée

Autoriser une barre de progression personnalisée ne figurait pas du tout sur ma liste de tâches lorsque je travaillais sur cette version. Mais voyant à quel point il est facile de personnaliser les notifications maintenant, je n'ai pas pu résister ?.

La meilleure partie est que vous n'avez pas à faire de compromis sur des fonctionnalités telles que la fermeture automatique, la pauseOnHover, la pauseOnFocusLoss ou même une barre de progression contrôlée : cela fonctionne de manière transparente pour vous.

Voici un petit aperçu.

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

Rendez-vous sur stackblitz pour un exemple en direct.

Accessibilité et navigation au clavier

ToastContainer et toast acceptent un accessoire ariaLabel (enfin...). Ceci est très utile pour les lecteurs d'écran et également pour les tests.
Par exemple, dans Cypress, vous pouvez faire cy.findByRole("alert", {name: "the aria label you selected"}).

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

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

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

Si une notification est visible et que l'utilisateur appuie sur alt t, elle se concentrera sur la première notification, permettant à l'utilisateur d'utiliser Tab pour naviguer à travers les différents éléments de la notification.

Les raccourcis clavier peuvent bien sûr être modifiés.

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

Raison de la suppression de la notification avec le rappel onClose

Voulez-vous savoir si l'utilisateur a fermé la notification ou si elle s'est fermée automatiquement ? Rassurez-vous, c'est désormais possible !

La signature du rappel onClose est désormais onClose(reason?: boolean | string) => nul.

Lorsque l'utilisateur ferme la notification, l'argument de raison est égal à vrai. Dans l'exemple ci-dessous, j'ai nommé mon argument
suppriméByUser pour clarifier l'intention.

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

Si vous utilisez un composant personnalisé pour votre notification, vous souhaiterez peut-être plus de contrôle sur le motif, surtout s'il contient
plusieurs appels à l'action.

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

? Changements révolutionnaires

useToastContainer et useToast ne sont plus exposés

Ces hooks sont inutilisables à moins que vous ne plongez en profondeur dans le code source de React-Toastify pour comprendre comment coller les choses ensemble. Ce n'est pas ce que je veux pour mes utilisateurs, c'était une mauvaise décision de les exposer en premier lieu, j'ai appris une bonne leçon.

onClose et onOpen ne reçoivent plus d'accessoires pour enfants

Avec le recul, je n’aurais jamais dû faire ça. La fonctionnalité n'est pratiquement pas utilisée. Ci-dessous la nouvelle signature pour chaque rappel :

• onOpen: () => vide
• onClose : (raison ? : booléen | chaîne) => vide

Stylisme

• réagir-toastify/dist/ReactToastify.minimal.css a été supprimé.
• Scss est hors de propos maintenant. La bibliothèque utilise le bon vieux CSS.
• bodyClassName et bodyStyle ne sont plus nécessaires.
• progressBarStyle afin de réduire la surface de l'API. Ils constituent désormais un meilleur moyen de tout personnaliser sans compter sur le style en ligne.
• injectStyle a été supprimé. Cette fonction n'est plus nécessaire.
• La classe CSS Toastify__toast-body et son enfant direct ont été supprimés.

? Corrections de bugs

• ajouter la prise en charge de React19 #1177 #1185
• réexporter CloseButtonProps #1165
• Correction de newOnTop pour de vrai cette fois #1176
• ne plus générer cette vilaine erreur : Impossible de définir les propriétés d'undefined (paramètre 'toggle') #1170
• Le rappel onClose n'est plus retardé jusqu'à ce que l'animation de sortie soit terminée #1179

?Quelle est la prochaine étape ?

Je réécris progressivement une partie de la documentation. J'ai créé une collection sur stackblitz, de cette façon vous pouvez trouver tous les exemples au même endroit. Je continuerai d'ajouter d'autres exemples au fur et à mesure.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!