Vous n'avez pas besoin de vous fier à un package tiers pour créer un composant de notification. Voici comment vous pouvez le construire vous-même.
Il existe plusieurs packages tiers disponibles dans React qui peuvent vous aider à créer un composant de notification. Cependant, si vous souhaitez simplement un composant de notification simple, vous pouvez créer le vôtre pour éviter d'ajouter des dépendances inutiles à votre application.
Configuration du projet
Vous serez utiliser Vite pour configurer 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 de fils pour créer un nouveau projet Vite en exécutant la commande ci-dessous.
fil créer vite
La commande vous demandera d'entrer un nom de projet. Entrez le nom du projet et appuyez sur Entrée. Ensuite, il vous demandera de sélectionner un cadre. Choisir réagir et appuyez sur Entrée. Enfin, il vous demandera de sélectionner une variante, choisissez Javascript puis appuyez sur Entrée.
Voici les configurations que ce tutoriel utilisera:
Une fois que Vite a créé le projet, accédez 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.
dev de fil
Cela ouvrira votre nouvelle application React dans votre navigateur par défaut à http://localhost: 5173/.
Conception du composant de notification
Afin de créer un composant de notification flexible, il doit être capable de 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 différentes variantes que le composant de notification devrait pouvoir rendre.
Vous pouvez y parvenir en transmettant des accessoires au composant qui spécifie le type de notification à afficher, 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 accessoires, voici un article qui explique comment utiliser les accessoires dans React.
Création du composant de notification
Dans le src dossier, créez un nouveau fichier nommé Notification.jsx et ajoutez le code suivant.
exporterdéfautfonctionNotification({type, titre, description}) {
retour (
{/* Contenu des notifications */}
</div>
)
}
Ce code crée un composant fonctionnel appelé Notification avec trois accessoires: taper, titre, et description. Vous utiliserez ces accessoires pour personnaliser le style et le contenu de la notification.
À partir de la conception, le composant comporte quelques icônes, à savoir des informations et une icône en forme de croix. Tu peux télécharger des icônes gratuites ou utilisez un composant d'icône d'un package tel que icônes de réaction. Ce tutoriel utilisera icônes de réaction alors installez-le en exécutant la commande ci-dessous.
fil ajouter des icônes de réaction
Importez ensuite les icônes en haut de la Notification composant.
importer { RxCross2, RxInfoCircled } depuis"réagir-icônes/rx"
Maintenant, vous pouvez modifier le composant pour utiliser les icônes, le titre et les valeurs prop de description pour créer le contenu de la notification.
exporterdéfautfonctionNotification({type, titre, description}) {
retour (
{titre}</div>
{description}</div>
</div>
</div>
</div>
)
}
L'étape suivante consiste à le styliser en fonction du type transmis.
Une approche que vous pouvez adopter consiste à définir des classes CSS pour chaque type de notification que vous souhaitez afficher. Vous pouvez ensuite appliquer conditionnellement 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.
importer "./notification.css"
Puis dans notification.css définissez les styles de base pour le composant de notification :
.notification {
afficher: fléchir;
flex-direction: ligne;
aligner les éléments: flex-start;
rembourrage: 8pixels;
}
.notification__left {
afficher: fléchir;
flex-direction: ligne;
rembourrage: 0pixels;
écart: 8pixels;
marge droite: 24pixels;
}
.notification__content {
afficher: fléchir;
flex-direction: colonne;
aligner les éléments: flex-start;
rembourrage: 0pixels;
}
.notification__title {
famille de polices: "Inter";
le style de police: normal;
poids de la police: 500;
taille de police: 14pixels;
}
.notification__description {
famille de polices: "Inter";
le style de police: normal;
poids de la police: 400;
taille de police: 12pixels;
rembourrage: 0;
}
Vous pouvez ensuite définir les styles pour les différents types de notification en ajoutant le code suivant dans le fichier CSS.
.notification__succès {
arrière-plan: #f6fef9;
frontière: 1pixelssolide#2f9461;
rayon de bordure: 8pixels;
}
.notification__error {
arrière-plan: #fffbfa;
frontière: 1pixelssolide#cd3636;
rayon de bordure: 8pixels;
}
.notification__avertissement {
arrière-plan: #fffcf5;
frontière: 1pixelssolide#c8811a;
rayon de bordure: 8pixels;
}
Le code ci-dessus stylise le conteneur de notification en fonction du type transmis.
Pour personnaliser le titre, utilisez les styles suivants.
.notification__title__succès {
couleur: #2f9461;
}
.notification__title__warning {
couleur: #c8811a;
}
.notification__title__error {
couleur: #cd3636;
}
Pour le texte de description personnalisé, utilisez ces styles.
.notification__description__succès {
couleur: #53b483;
}
.notification__description__avertissement {
couleur: #e9a23b;
}
.notification__description__error {
couleur: #f34141;
}
Et pour les icônes, utilisez les classes suivantes.
.notification_icon_error {
couleur: #cd3636;
}
.notification__icon__succès {
couleur: #2f9461;
}
.notification__icon__avertissement {
couleur: #c8811a;
}
Puis, dans le Notification composant, vous pouvez appliquer conditionnellement la classe appropriée en fonction du taper prop, comme ceci:
exporterdéfautfonctionNotification({type, titre, description}) {
retour (
`notification notification__${type}`}>
`notification__left`}>
`notification__icon__${type}`}/>
"notification__contenu">
`notification__title notification__title__${type}`}>{titre}</div>
`notification__description notification__description__${type}`}>{description}</div>
</div>
</div>
`notification__icon__${type}`}/>
</div>
)
}
Dans ce composant, vous définissez dynamiquement la classe en fonction du type tel que notification__succès ou notification__error.
Pour voir cela en action, importez le composant Notification dans App.jsx et utilisez-le comme suit :
importer Notification depuis'./Notification'fonctionApplication() {
retour (
<>
taper="succès"
titre="Tâche terminée"
descriptif="Votre tâche a été accomplie avec succès."
/>
</>
)
}
exporterdéfaut Application
Maintenant, vous pouvez passer un type différent au Notification composant et afficher une notification appropriée qui correspond au message.
Ceci est essentiel pour une bonne expérience utilisateur car les utilisateurs en sont venus à associer différentes couleurs et styles à différents scénarios, et il est important d'utiliser ces associations de manière cohérente. Par exemple, il serait déroutant de faire savoir à un utilisateur qu'il a réussi à télécharger une photo dans une boîte de notification rouge. Ils pourraient penser que le téléchargement a échoué, même s'il a réussi.
Ajout d'interactivité au composant de notification
Vous avez appris comment utiliser les accessoires pour créer un composant de notification personnalisable. Pour aller encore plus loin, vous pouvez ajouter des transitions à ce composant pour le rendre plus attrayant. Par exemple, vous pouvez utiliser des animations CSS pour faire glisser le composant de notification sur l'écran et le faire glisser après une certaine durée.