Il existe plusieurs packages tiers disponibles dans React qui peuvent vous aider à créer un composant de notification. Cependant, si vous voulez juste un composant de notification simple, vous pouvez créer le vôtre pour éviter d’ajouter des dépendances inutiles à votre application.
Mise en place du projet
Vous allez utiliser Vite pour mettre en place l’application React. Vite est un outil de construction qui vous permet d’échafauder rapidement un projet React.
Pour commencer, utilisez le gestionnaire de paquets yarn pour créer un nouveau projet Vite en exécutant la commande ci-dessous.
yarn create vite
La commande vous invite à saisir un nom de projet. Saisissez le nom du projet et appuyez sur Entrée. Ensuite, vous serez invité à sélectionner un cadre de travail. Choisissez react et appuyez sur Entrée. Enfin, il vous demandera de sélectionner une variante, choisissez JavaScript et appuyez sur Entrée.
Voici les configurations utilisées dans ce tutoriel :
Une fois que Vite a créé le projet, naviguez jusqu’au dossier du projet et ouvrez-le à l’aide d’un éditeur de code.
Vous pouvez ensuite démarrer le serveur de développement en exécutant la commande suivante.
yarn dev
Cela ouvrira votre nouvelle application React dans votre navigateur par défaut à l’adresse http://localhost:5173/.
Conception du composant de notification
Pour créer un composant de notification flexible, il faut qu’il puisse gérer différents types de notifications avec des titres, des descriptions et des styles variés. Par exemple, il doit afficher une notification d’avertissement, de réussite et d’erreur.
Voici les différentes variations que le composant de notification doit être en mesure d’afficher.
Vous pouvez y parvenir en passant au composant des accessoires qui spécifient le type de notification à rendre, le titre et le texte de description. En utilisant ces accessoires, vous pouvez personnaliser le composant et le réutiliser dans votre application avec un minimum d’effort. Si vous avez besoin d’un rappel sur les props, voici un article qui explique comment utiliser les props dans React.
Création du composant de notification
Dans la fenêtre src créer un nouveau fichier nommé Notification.jsx et ajoutez le code suivant.
export default function Notification({type, title, description}) {
return (
<div>
{/* Notification content */}
</div>
)
}
Ce code crée un composant fonctionnel appelé Notification avec trois accessoires : type, titre, et description. Vous utiliserez ces accessoires pour personnaliser le style et le contenu de la notification.
D’après la conception, le composant comporte deux icônes, à savoir une icône d’information et une icône de croix. Vous pouvez télécharger des icônes libres d’utilisation ou utiliser un composant d’icône provenant d’un paquet tel que react-icons. Ce tutoriel utilisera react-icons installez-le donc en exécutant la commande ci-dessous.
yarn add react-icons
Importez ensuite les icônes en haut de la page Notification composant.
import { RxCross2, RxInfoCircled } from "react-icons/rx"
Vous pouvez maintenant modifier le composant afin d’utiliser les icônes, le titre et la description pour créer le contenu de la notification.
export default function Notification({type, title, description}) {
return (
<div>
<div>
<RxInfoCircled/>
<div>
<div>{title}</div>
<div>{description}</div>
</div>
</div>
<RxCross2/>
</div>
)
}
L’étape suivante consiste à styliser le composant en fonction du type transmis.
Une approche possible consiste à définir des classes CSS pour chaque type de notification que vous souhaitez afficher. Vous pouvez ensuite appliquer de manière conditionnelle la classe appropriée en fonction du type transmis.
Pour commencer, créez un nouveau fichier appelé notification.css et l’importer dans Notification.jsx en ajoutant le code suivant en haut.
import "./notification.css"
Puis dans notification.css définit les styles de base pour le composant de notification :
.notification {
display: flex;
flex-direction: row;
align-items: flex-start;
padding: 8px;
}
.notification__left {
display: flex;
flex-direction: row;
padding: 0px;
gap: 8px;
margin-right: 24px;
}
.notification__content {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
}
.notification__title {
font-family: "Inter";
font-style: normal;
font-weight: 500;
font-size: 14px;
}
.notification__description {
font-family: "Inter";
font-style: normal;
font-weight: 400;
font-size: 12px;
padding: 0;
}
Vous pouvez ensuite définir les styles des différents types de notification en ajoutant le code suivant dans le fichier CSS.
.notification__success {
background: #f6fef9;
border: 1px solid #2f9461;
border-radius: 8px;
}
.notification__error {
background: #fffbfa;
border: 1px solid #cd3636;
border-radius: 8px;
}
.notification__warning {
background: #fffcf5;
border: 1px solid #c8811a;
border-radius: 8px;
}
Le code ci-dessus définit le style du conteneur de notification en fonction du type transmis.
Pour personnaliser le titre, utilisez les styles suivants.
.notification__title__success {
color: #2f9461;
}
.notification__title__warning {
color: #c8811a;
}
.notification__title__error {
color: #cd3636;
}
Pour le texte de description personnalisé, utilisez les styles suivants.
.notification__description__success {
color: #53b483;
}
.notification__description__warning {
color: #e9a23b;
}
.notification__description__error {
color: #f34141;
}
Et pour les icônes, utilisez les classes suivantes.
.notification_icon_error {
color: #cd3636;
}
.notification__icon__success {
color: #2f9461;
}
.notification__icon__warning {
color: #c8811a;
}
Ensuite, dans la section Notification vous pouvez appliquer de manière conditionnelle la classe appropriée en fonction du composant type comme ceci :
export default function Notification({type, title, description}) {
return (
<div className={`notification notification__${type}`}>
<div className={`notification__left`}>
<RxInfoCircled className={`notification__icon__${type}`}/>
<div className="notification__content">
<div className={`notification__title notification__title__${type}`}>{title}</div>
<div className={`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
<RxCross2 className={`notification__icon__${type}`}/>
</div>
)
}
Dans ce composant, vous définissez dynamiquement la classe en fonction du type, par exemple notification__success ou notification__error.
Pour voir cela en action, importez le composant Notification dans le fichier App.jsx et l’utiliser comme suit :
import Notification from './Notification'
function App() {
return (
<>
<Notification
type="success"
title="Task Completed"
description="Your task has been completed successfully."
/>
</>
)
}
export default App
Maintenant, vous pouvez passer un type différent à la fonction Notification et de rendre une notification appropriée qui corresponde au message.
Ceci est essentiel pour une bonne expérience utilisateur, car les utilisateurs en sont venus à associer différentes couleurs et différents styles à différents scénarios, et il est important d’utiliser ces associations de manière cohérente. Par exemple, il serait déroutant d’informer un utilisateur qu’il a réussi à télécharger une photo dans une boîte de notification rouge. Il pourrait penser que le téléchargement a échoué, alors qu’il s’est déroulé avec succès.
Ajout d’interactivité au composant de notification
Vous avez appris à utiliser les accessoires pour créer un composant de notification personnalisable. Pour aller encore plus loin, vous pouvez ajouter des transitions à ce composant afin de le rendre plus attrayant. Par exemple, vous pouvez utiliser des animations CSS pour faire glisser le composant de notification vers l’écran et le faire disparaître après une certaine durée.