Créer une alerte React fermable

Introduction

Dans ce laboratoire (lab), nous allons créer un composant d'alerte fermable (Closable Alert) en utilisant React. Ce composant permettra aux utilisateurs d'afficher un message d'un type spécifique et de fermer l'alerte une fois qu'ils ont terminé avec elle. À la fin de ce laboratoire, vous aurez appris à utiliser les hooks useState() et useEffect() pour créer un composant dynamique qui peut être facilement personnalisé pour répondre à vos besoins.

Alerte fermable (Closable Alert)

index.html et script.js ont déjà été fournis dans la machine virtuelle (VM). En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Rend un composant d'alerte avec la prop type.

Le composant Alert prend les props suivantes :

• isDefaultShown : un booléen qui détermine si l'alerte est affichée initialement ou non (la valeur par défaut est false)
• timeout : un nombre qui spécifie la durée en millisecondes avant que l'alerte ne disparaisse progressivement (la valeur par défaut est 250)
• type : une chaîne de caractères qui détermine le type d'alerte (par exemple, "warning", "error", "info")
• message : une chaîne de caractères qui contient le message à afficher dans l'alerte

Le composant effectue les actions suivantes :

• Utilise le hook useState() pour créer les variables d'état isShown et isLeaving et les initialise toutes les deux à false.
• Définit une variable timeoutId pour conserver l'instance du minuteur afin de l'annuler lorsque le composant est démonté.
• Utilise le hook useEffect() pour mettre à jour la valeur de isShown à true et annuler l'intervalle en utilisant timeoutId lorsque le composant est démonté.
• Définit une fonction closeAlert pour marquer le composant comme supprimé du DOM en affichant une animation de disparition progressive et en définissant isShown à false via setTimeout().
• Rend le composant d'alerte si isShown est true. Le composant a les styles appropriés en fonction de la prop type et disparaît progressivement si isLeaving est true.

Voici le code :

@keyframes leave {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.alert {
  padding: 0.75rem 0.5rem;
  margin-bottom: 0.5rem;
  text-align: left;
  padding-right: 40px;
  border-radius: 4px;
  font-size: 16px;
  position: relative;
}

.alert.warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert.error {
  color: #721c24;
  background-color: #f8d7da;
  border-color: #f5c6cb;
}

.alert.leaving {
  animation: leave 0.5s forwards;
}

.alert.close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 0.75rem;
  color: #333;
  border: 0;
  height: 100%;
  cursor: pointer;
  background: none;
  font-weight: 600;
  font-size: 16px;
}

.alert.close::after {
  content: "x";
}

const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
  const [isShown, setIsShown] = React.useState(isDefaultShown);
  const [isLeaving, setIsLeaving] = React.useState(false);

  let timeoutId = null;

  React.useEffect(() => {
    setIsShown(true);
    return () => {
      clearTimeout(timeoutId);
    };
  }, [isDefaultShown, timeout, timeoutId]);

  const closeAlert = () => {
    setIsLeaving(true);
    timeoutId = setTimeout(() => {
      setIsLeaving(false);
      setIsShown(false);
    }, timeout);
  };

  return (
    isShown && (
      <div
        className={`alert ${type} ${isLeaving ? "leaving" : ""}`}
        role="alert"
      >
        <button className="close" onClick={closeAlert} />
        {message}
      </div>
    )
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <Alert type="info" message="This is info" />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Résumé

Félicitations! Vous avez terminé le laboratoire (lab) sur l'alerte fermable (Closable Alert). Vous pouvez pratiquer davantage de laboratoires sur LabEx pour améliorer vos compétences.