Comment créer un composant de notification personnalisé dans React à l'aide de SweetAlert

SweetAlert est une bibliothèque populaire qui vous permet de créer des composants de notification personnalisés pour votre application React. Vous pouvez utiliser des notifications pour alerter les utilisateurs sur des informations importantes, des erreurs ou des actions réussies dans votre application. Cela ajoute à une excellente expérience utilisateur.

Installation de la bibliothèque SweetAlert

Pour utiliser le SweetAlert bibliothèque pour créer des notifications, vous devez l'installer à l'aide du gestionnaire de packages de votre choix.

Vous pouvez l'installer via le Gestionnaire de paquets NPM en lançant la commande suivante dans votre terminal :

npm installer sweetalert --save

Utiliser SweetAlert pour créer des notifications

La création de notifications personnalisées dans votre application React à l'aide de la bibliothèque SweetAlert est similaire à en utilisant la bibliothèque Toastify

. Le avaler La fonction fournie par la bibliothèque SweetAlert crée une instance du composant de notification et définit les propriétés de la notification.

Voici un exemple d'utilisation de swal() fonction pour créer un composant de notification :

importer Réagir depuis'réagir'
importer avaler depuis'sweetalert'
fonctionApplication() {
constante notifier = () => avale ('Bonjour');
retour (



Cliquez sur moi</button>
 </div>
 )
}
exporterdéfaut Application

Cliquer sur le bouton appellera le avaler fonction, qui affichera une notification avec le message "Hello There".

Le avaler fonction prend trois paramètres. Le premier paramètre est le titre de la notification, le deuxième paramètre est le message et le troisième est l'icône à afficher dans votre notification.

Vous pouvez régler le icône paramètre à l'une des valeurs prédéfinies, c'est-à-dire succès, avertissement, erreur, ou Info. L'icône de notification sera alors basée sur les valeurs que vous avez passées.

Par exemple:

importer Réagir depuis'réagir'
importer avaler depuis'sweetalert'
fonctionApplication() {
constante notifier = () => avale ('Bonjour', 'Bienvenue sur ma page', 'succès');
retour (



Cliquez sur moi</button>
 </div>
 )
}
exporterdéfaut Application

Lorsque l'utilisateur clique sur le bouton, il appelle le notifier fonction. Cette fonction affichera alors une notification avec le message "Hello There" et "Welcome to my Page" avec une icône de réussite.

Une alternative à l'utilisation du avaler fonction avec les trois paramètres serait d'utiliser le avaler fonction avec le paramètre objet. Ce paramètre d'objet contient des propriétés qui définissent le composant de notification.

Par exemple:

importer Réagir depuis'réagir'
importer avaler depuis'sweetalert'
fonctionApplication() {
constante notifier = () => avale (
 {
 titre: 'Bonjour',
 texte: 'Bienvenue sur ma page',
 icône: 'succès',
 bouton: 'D'ACCORD',
 }
 );
retour (



Cliquez sur moi</button>
 </div>
 )
}
exporterdéfaut Application

Dans le bloc de code ci-dessus, le avaler La fonction prend un objet avec les propriétés suivantes: titre, texte, icône, et bouton.

Le titre La propriété spécifie le titre de la notification, tandis que la propriété texte La propriété définit le message. Avec le icône propriété, vous pouvez spécifier le type d'icône affiché dans la notification.

Enfin, le bouton La propriété spécifie le texte du bouton affiché dans la notification. Dans ce cas, le bouton affiche le texte D'ACCORD.

Personnalisation de la propriété du bouton

Vous pouvez personnaliser le bouton propriété de votre composant de notification pour répondre à vos besoins de conception. Le bouton La propriété prend un objet avec des propriétés utilisées pour configurer le comportement et l'apparence du bouton.

Un bouton par défaut contient les propriétés suivantes :

avale (
 {
 bouton: {
 texte: "D'ACCORD",
 valeur: vrai,
 visible: vrai,
 nom du cours: "",
 closeModal: vrai
 },
 }
 );

Dans le bloc de code ci-dessus, les propriétés suivantes sont utilisées avec le bouton :

• texte: Le texte à afficher sur le bouton.
• valeur: La valeur à renvoyer lorsque l'utilisateur clique sur le bouton. Dans ce cas, la valeur est vrai.
• visible: Une valeur booléenne indique si le bouton doit être visible.
• nom du cours: Une chaîne représentant la classe CSS à appliquer au bouton.
• closeModal: Une valeur booléenne indiquant si le modal doit être fermé lorsque le bouton est cliqué.

Vous pouvez également rendre plus d'un bouton à l'aide d'un tableau avec le boutons propriété. Le tableau prendra des chaînes comme éléments.

Par exemple:

avale (
 {
 boutons: ["Annuler", "D'accord"],
 }
 );

Dans cet exemple, votre composant de notification contiendra deux boutons avec les textes ' Annuler et D'accord. Réglage de la boutons propriété à FAUX affichera une notification sans bouton.

Rendu des éléments HTML à l'intérieur du composant de notification

Vous pouvez également afficher des éléments HTML en dehors des chaînes simples sous forme de notification. Cela offre un large éventail d'options de personnalisation.

Par exemple:

importer Réagir depuis'réagir'
importer avaler depuis'sweetalert'
fonctionApplication() {
constante notifier = () => avale (
 {
 contenu: {
 élément: 'saisir',
 les attributs: {
 espace réservé: 'Prénom',
 taper: 'texte'
 }
 },
 boutons: 'S'inscrire'
 }
 )
retour (

"application">
Cliquez sur moi</button>
 </div>
 )
}
exporterdéfaut Application

Dans cet exemple, vous utilisez le contenu propriété pour afficher un champ de saisie avec un texte d'espace réservé.

Vous spécifiez le contenu de la notification à l'aide de la contenu propriété et l'élément HTML à afficher avec la propriété élément propriété. Pour spécifier les attributs de l'élément HTML, vous utilisez le les attributs propriété.

Le bloc de code ci-dessus affichera la notification ci-dessous lorsque vous cliquerez sur l'élément de bouton.

Styliser le composant de notification

Plutôt que d'adhérer au style de boîte de notification par défaut fourni par la bibliothèque SweetAlert, vous pouvez personnaliser l'apparence de la boîte de notification en appliquer vos propres styles CSS.

Vous utiliserez le nom du cours propriété pour ajouter vos styles à la notification. Le nom du cours La propriété définit une classe CSS pour la notification.

Par exemple:

avale (
 {
 titre: 'Bonjour',
 texte: 'Bienvenue sur ma page',
 bouton: FAUX,
 nom du cours: 'alerte',
 }
 )

La notification dans le bloc de code ci-dessus a un nom du cours valeur alerte. Après avoir créé la notification et défini le nom du cours, vous définirez vos styles CSS :

.alerte{
Couleur de l'arrière plan: vert;
famille de polices: cursive;
rayon de bordure: 15pixels;
}

Les styles CSS ci-dessus s'appliqueront à la notification lors du rendu :

Fermeture du composant de notification

La bibliothèque SweetAlert fournit plusieurs options pour personnaliser la façon dont vos notifications sont fermées. Ces options sont les closeOnEsc, closeOnClickOutside, et minuteur propriétés.

Le closeOnEsc La propriété détermine si la boîte de notification se ferme lorsque l'utilisateur appuie sur la touche Échap de son clavier. Le closeOnEsc propriété prend une valeur booléenne.

avale (
 {
 ...,
 closeOnEsc: FAUX,
 }
 )

Par défaut, le closeOnEsc la propriété est définie sur vrai. Dans le bloc de code ci-dessus, vous définissez le closeOnEsc propriété à FAUX. En définissant la propriété sur FAUX, l'utilisateur ne peut pas fermer la boîte de notification en appuyant sur la touche Échap.

Vous pouvez également déterminer si l'utilisateur peut fermer la boîte de notification en cliquant à l'extérieur de la boîte à l'aide de la closeOnClickOutside propriété.

Si la propriété est définie sur vrai, le closeOnClickOutside La propriété permet la fermeture de la boîte de notification en cliquant n'importe où en dehors de celle-ci. C'est le comportement par défaut de SweetAlert. Pour arrêter ce comportement, définissez le closeOnClickOutside propriété à FAUX.

avale (
 {
 ...,
 closeOnClickOutside: FAUX,
 }
 )

Avec le minuteur propriété, vous pouvez définir un délai pour que la boîte de notification se ferme automatiquement. Le minuteur La propriété prend une valeur entière en millisecondes.

avale (
 {
 ...,
 minuteur: 5000,
 }
 )

Dans cet exemple, le minuteur la propriété est définie sur 5000. La notification ne sera visible que pendant 5 secondes.

Notifications personnalisées efficaces à l'aide de SweetAlert

SweetAlert est une bibliothèque puissante à l'aide de laquelle vous pouvez créer des notifications personnalisées dans une application React. Utilisation de la bibliothèque avaler fonction, vous pouvez désormais créer des notifications avec des propriétés et un comportement personnalisés. Vous pouvez également utiliser d'autres bibliothèques telles que React-Toastify pour créer des alertes personnalisées dans une application React.