SweetAlert est une bibliothèque populaire qui vous donne la possibilité de créer des composants de notification personnalisés pour votre application React. Vous pouvez utiliser les notifications pour alerter les utilisateurs sur des informations importantes, des erreurs ou des actions réussies dans votre application. Cela permet d’améliorer l’expérience de l’utilisateur.
Installation de la bibliothèque SweetAlert
Pour utiliser la bibliothèque SweetAlert afin de créer des notifications, vous devez l’installer en utilisant le gestionnaire de paquets de votre choix.
Vous pouvez l’installer via le gestionnaire de paquets NPM en lançant la commande suivante dans votre terminal :
npm install sweetalert --save
Utiliser SweetAlert pour créer des notifications
Créer des notifications personnalisées dans votre application React en utilisant la bibliothèque SweetAlert est similaire à l’utilisation de la bibliothèque Toastify. La bibliothèque swal 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 la fonction swal() pour créer un composant de notification :
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
En cliquant sur le bouton, on appelle la fonction swal qui affichera une notification avec le message « Hello There ».
Le swal 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 définir le icône à l’une des valeurs prédéfinies, c’est-à-dire, succès, avertissement, erreurou info. La notification sera alors basée sur les valeurs que vous avez transmises.
Par exemple :
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal('Hello There', 'Welcome to my Page', 'success');
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Lorsque l’utilisateur clique sur le bouton, il appelle la fonction notifier . Cette fonction affichera alors une notification contenant le message « Hello There » et « Welcome to my Page » avec une icône de succès.
Une alternative à l’utilisation de la fonction swal avec les trois paramètres serait d’utiliser la fonction swal avec le paramètre objet. Ce paramètre d’objet contient des propriétés qui définissent le composant de notification.
Par exemple :
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
icon: 'success',
button: 'OK',
}
);
return (
<div>
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Dans le bloc de code ci-dessus, l’élément swal prend un objet avec les propriétés suivantes : titre, texte, icôneet bouton.
Les titre spécifie le titre de la notification, tandis que la propriété texte définit le message. Avec la propriété icône vous permet de spécifier le type d’icône affiché dans la notification.
Enfin, la propriété bouton spécifie le texte du bouton affiché dans la notification. Dans ce cas, le bouton affiche le texte OK.
Personnaliser la propriété du bouton
Vous pouvez personnaliser la propriété bouton de votre composant de notification pour répondre à vos besoins de conception. La propriété bouton 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 :
swal(
{
button: {
text: "OK",
value: true,
visible: true,
className: "",
closeModal: true
},
}
);
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 true.
- visible: Une valeur booléenne indique si le bouton doit être visible.
- nom de classe: Une chaîne représentant la classe CSS à appliquer au bouton.
- closeModal: Une valeur booléenne indiquant si la fenêtre modale doit être fermée lorsque le bouton est cliqué.
Vous pouvez également rendre plus d’un bouton en utilisant un tableau à l’aide de la fonction boutons propriété. Les éléments du tableau sont des chaînes de caractères.
Par exemple :
swal(
{
buttons: ["Cancel", "Ok"],
}
);
Dans cet exemple, votre composant de notification contiendra deux boutons avec les textes ‘ annuler et Ok. Réglage de la boutons propriété à faux rendra une notification sans bouton.
Rendre les éléments HTML à l’intérieur du composant de notification
Vous pouvez également rendre des éléments HTML autres que des chaînes de caractères simples dans une notification. Cela offre un large éventail d’options de personnalisation.
Par exemple :
import React from 'react'
import swal from 'sweetalert'
function App() {
const notify = () => swal(
{
content: {
element: 'input',
attributes: {
placeholder: 'First Name',
type: 'text'
}
},
buttons: 'Sign Up'
}
)
return (
<div className="app">
<button onClick={notify}>Click Me</button>
</div>
)
}
export default App
Dans cet exemple, vous utilisez l’option contenu pour rendre un champ de saisie avec un texte de remplacement.
Vous spécifiez le contenu de la notification à l’aide de la propriété contenu et l’élément HTML à rendre avec la propriété de l’élément propriété. Pour spécifier les attributs de l’élément HTML, vous utilisez la propriété attributs propriété.
Le bloc de code ci-dessus affichera la notification ci-dessous lorsque vous cliquerez sur l’élément bouton.
Styliser le composant de notification
Plutôt que d’adhérer au style par défaut de la boîte de notification fourni par la bibliothèque SweetAlert, vous pouvez personnaliser l’apparence de la boîte de notification en appliquant vos propres styles CSS.
Vous utiliserez la balise nomdeclasse pour ajouter vos styles à la notification. La propriété nomdeclasse définit une classe CSS pour la notification.
Par exemple :
swal(
{
title: 'Hello There',
text: 'Welcome to my Page',
button: false,
className: 'alert',
}
)
La notification dans le bloc de code ci-dessus a une valeur nom de classe valeur alerte. Après avoir créé la notification et défini le nomdeclassevous définirez vos styles CSS :
.alert{
background-color: green;
font-family: cursive;
border-radius: 15px;
}
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 suivantes closeOnEsc, closeOnClickOutsideet minuterie propriétés.
Le closeOnEsc détermine si la boîte de notification se ferme lorsque l’utilisateur appuie sur la touche Esc de son clavier. La propriété closeOnEsc prend une valeur booléenne.
swal(
{
...,
closeOnEsc: false,
}
)
Par défaut, la propriété closeOnEsc est fixée à vrai. Dans le bloc de code ci-dessus, vous définissez le paramètre closeOnEsc propriété à faux. En fixant la propriété à fauxl’utilisateur ne peut pas fermer la boîte de notification en appuyant sur la touche Esc.
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 touche closeOnClickOutside propriété.
Si la propriété est définie sur true, le closeOnClickOutside permet de fermer la boîte de notification en cliquant n’importe où à l’extérieur de celle-ci. C’est le comportement par défaut de SweetAlert. Pour arrêter ce comportement, définissez la propriété closeOnClickOutside propriété de faux.
swal(
{
...,
closeOnClickOutside: false,
}
)
Avec le chronomètre vous pouvez définir une limite de temps pour que la boîte de notification se ferme automatiquement. La propriété minuterie prend une valeur entière en millisecondes.
swal(
{
...,
timer: 5000,
}
)
Dans cet exemple, la propriété timer est fixée à 5000. La notification ne sera visible que pendant 5 secondes.
Notifications personnalisées efficaces avec SweetAlert
SweetAlert est une bibliothèque puissante qui permet de créer des notifications personnalisées dans une application React. En utilisant la fonction swal Avec la fonction React-Toastify, vous pouvez maintenant créer des notifications avec des propriétés et un comportement personnalisés. Vous pouvez également utiliser d’autres bibliothèques comme React-Toastify pour créer des alertes personnalisées dans une application React.
