Ajouter des effets pop-up à votre application React.js

Les pop-ups sont un excellent moyen d'attirer l'attention de votre utilisateur et d'afficher des informations importantes. Vous pouvez les utiliser pour des choses comme les messages de confirmation et les messages d'erreur. Ou vous pouvez simplement les utiliser pour afficher des informations supplémentaires sur un élément d'une page.

Dans React, il existe deux manières de créer des pop-ups: en utilisant des hooks React ou en utilisant un module externe.

Comment créer des fenêtres contextuelles dans React.js

D'abord, créer une application de réaction simple. Après cela, vous pouvez ajouter une fenêtre contextuelle en utilisant l'une des deux méthodes. Vous pouvez utiliser des hooks React ou un module externe.

1. Utilisation des crochets React

L'approche des crochets est plus simple et ne nécessite que quelques lignes de code.

Tout d'abord, vous devez créer une fonction qui ouvrira la fenêtre contextuelle. Vous pouvez définir cette fonction dans le composant qui affichera la pop-up.

Ensuite, vous devez utiliser le crochet useState pour créer une variable d'état pour la fenêtre contextuelle. Vous pouvez utiliser cette variable d'état pour déterminer si la fenêtre contextuelle doit être ouverte ou non.

Enfin, vous devez ajouter un bouton à votre composant qui déclenchera la fenêtre contextuelle. Lorsque vous cliquez sur ce bouton, définissez la variable d'état sur true, ce qui fera apparaître la fenêtre contextuelle.

Jetez un oeil au code de cette approche:

importer Réagissez, { useState } depuis 'réagir';
fonctionExemple() {
constante [isOpen, setIsOpen] = useState(FAUX);
retour (
<div>
<bouton onClick={() => setIsOpen (vrai)}>
 Ouvrir la fenêtre contextuelle
</button>
{est ouvert && (
<div>
<div>
 Ce est le contenu de la fenêtre contextuelle.
</div>
<bouton onClick={() => setIsOpen (faux)}>
 Fermer la fenêtre contextuelle
</button>
</div>
 )}
</div>
 );
}
exporterdéfaut Exemple;

Tout d'abord, ce code importe le crochet useState à partir de la bibliothèque de réaction principale. Ensuite, la fonction Example utilise le crochet useState pour créer une variable d'état appelée isOpen. Cette variable d'état détermine si la fenêtre contextuelle doit être ouverte ou non.

Ensuite, ajoutez un bouton au composant qui déclenchera la fenêtre contextuelle. Lorsque vous cliquez sur ce bouton, la variable d'état sera définie sur true, ce qui fera apparaître la fenêtre contextuelle.

Enfin, ajoutez un bouton au composant qui fermera la fenêtre contextuelle. Lorsque vous cliquez sur ce bouton, la variable d'état sera définie sur false, ce qui entraînera la disparition de la fenêtre contextuelle.

2. Utilisation d'un module externe

Vous pouvez également créer des pop-ups dans React à l'aide d'un module externe. Il existe de nombreux modules disponibles que vous pouvez utiliser à cette fin.

Un module populaire est react-modal. react-modal est un module simple et léger qui vous permet de créer des boîtes de dialogue modales dans React.

Pour utiliser react-modal, vous devez d'abord l'installer en utilisant npm :

npm installer réagir-modal

Une fois que vous avez installé react-modal, vous pouvez l'importer dans votre composant React :

importer RéagirModal depuis 'réagir-modal' ;
importer Réagissez, { useState } depuis 'réagir';
fonctionExemple() {
constante [isOpen, setIsOpen] = useState(FAUX);
retour (
<div>
<bouton onClick={setIsOpen}>Mode ouvert</button>
<RéagirModal
 estOuvert={estOuvert}
 contentLabel="Exemple modal"
>
 Ce est le contenu du modal.
</ReactModal>
</div>
 );
}
exporterdéfaut Exemple;

Dans ce code, vous utilisez toujours les hooks React mais avec le module react-modal. Avec le module react-modal, vous pouvez ajouter plus de fonctionnalités à la fenêtre contextuelle. Comme vous pouvez le voir, le code est très similaire à l'approche précédente. La seule différence est que vous utilisez maintenant le composant ReactModal de react-modal au lieu de créer le vôtre.

Tout d'abord, vous devez importer le module react-modal. Ensuite, vous utilisez le composant ReactModal pour envelopper le contenu de votre pop-up. Utilisez la prop isOpen pour déterminer si le modal doit être ouvert ou non.

Une fois que vous avez créé votre pop-up, vous souhaiterez peut-être lui ajouter des fonctionnalités supplémentaires. Par exemple, vous souhaiterez peut-être fermer la fenêtre contextuelle lorsque l'utilisateur clique en dehors de celle-ci.

Pour ce faire, vous devez utiliser le prop onRequestClose du composant react-modal. Cette prop prend une fonction comme valeur. Cette fonction s'exécutera lorsque l'utilisateur cliquera en dehors du modal.

Par exemple, pour fermer la fenêtre contextuelle lorsque l'utilisateur clique en dehors de celle-ci, vous utiliserez le code suivant :

importer Réagissez, { useState } depuis 'réagir';
importer RéagirModal depuis 'réagir-modal' ;
fonctionExemple() {
constante [isOpen, setIsOpen] = useState(FAUX);
retour (
<div>
<bouton onClick={() => setIsOpen (vrai)}>
 Mode ouvert
</button>
<RéagirModal
 estOuvert={estOuvert}
 contentLabel="Exemple modal"
 onRequestClose={() => setIsOpen(FAUX)}
>
 Ce est le contenu du modal.
</ReactModal>
</div>
 );
}
exporterdéfaut Exemple;

La fonction que nous transmettons à la prop onRequestClose définit simplement la variable d'état isOpen sur false. Cela entraînera la fermeture du modal.

Vous pouvez également ajouter d'autres accessoires au composant ReactModal pour le personnaliser davantage. Pour une liste complète des accessoires, vous pouvez consulter la documentation de react-modal.

Ajout de style dans les pop-ups

Une fois que vous avez créé votre pop-up, vous voudrez peut-être lui ajouter un style. Il existe de nombreuses façons de styliser les composants React, mais nous nous concentrerons sur les styles en ligne.

Les styles en ligne sont des styles que vous pouvez ajouter directement à un composant React. Pour ajouter des styles en ligne, vous devez utiliser la propriété style. Cette propriété prend un objet comme valeur, où les clés sont les propriétés de style et les valeurs sont les valeurs de style.

Par exemple, pour ajouter une couleur d'arrière-plan blanche et une largeur de 500 px à une fenêtre contextuelle, vous utiliserez le code suivant :

importer Réagir depuis 'réagir';
fonctionExemple() {
retour (
<div style={{ backgroundColor: 'blanc', largeur: '500px' }}>
 Ce est le contenu de la fenêtre contextuelle.
</div>
 );
}
exporterdéfaut Exemple;

Dans ce code, vous ajoutez la propriété style à l'élément div avec les propriétés backgroundColor et width. Vous pouvez aussi utiliser Tailwind CSS dans l'application React pour styliser vos popups.

Augmentez le taux de conversion avec les pop-ups

Les pop-ups peuvent aider à augmenter les taux de conversion en affichant des informations importantes pour l'utilisateur. Par exemple, vous pouvez utiliser une pop-up pour afficher un code de réduction ou une offre spéciale. Vous pouvez également utiliser une fenêtre contextuelle pour collecter des adresses e-mail pour votre newsletter. L'ajout d'une fenêtre contextuelle à votre application React est un excellent moyen d'augmenter les taux de conversion.

Vous pouvez également déployer facilement votre application React gratuitement sur les pages GitHub.