Pop-up avec React

July 04, 2021

Voyons à quoi ressemble la pop-up que nous allons réaliser.

On commence par créer une nouvelle application qu’on a appelée react-popup.

npx create-react-app react-popup

Une fois l’installation terminée, vous pouvez supprimer les fichiers suivants, car ils ne nous seront d’aucune utilité pour ce petit projet : setupTests.js, logo.svg, reportWebVitals.js, App.css

Pensez également à nettoyer le fichier App.js afin d’éviter les erreurs. (effacer l’import du logo et du fichier App.css), nettoyer également le fichier index.js en supprimant l’import du reportWebVitals et la dernière ligne qui le mentionne.

Vous pouvez lancer l’application React:

npm run start

Nous allons créer le composant pour le pop-up, pour cela créer un fichier Popup.js dans le dossier/src

Ensuite, nous allons définir et styliser notre pop-up.

Voici à quoi ressemble notre fichier Popup.js, ce sera donc un pop-up façon consentement des cookies, qu’on retrouve sur tous les sites du web.

import React from "react";

const Popup = () => {
  return  (
    <div className="wrapper">
      <div className="popup">
        <h3 className="title-popup">Le site respecte votre vie privée</h3>
        <p className="text-popup">
          Ce site utilise des cookies. Vous avez la possibilité de déterminer
          les cookies que vous autorisez ou refusez.
        </p>
        <div className="btn">
          <button className="close-btn" >
            Accepter
          </button>
          <button className="close-btn" >
            Continuer sur le site sans accepter
          </button>
        </div>
      </div>
    </div>
  ) 
};

export default Popup;

Maintenant, donnons un peu de style a notre pop-up, modifier votre fichier index.css

Voici à quoi ressemble notre fichier index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

main {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: left;
  align-items: flex-end;
}

@media (max-width: 640px) {
  .popup {
    width: auto !important;
    padding: 16px !important;
  }
}

.popup {
  position: relative;
  padding: 32px;
  width: 32.4102564rem !important;
  background-color: black;
  color: white;
}
.btn {
  display: flex;
  flex-direction: column;

  border-radius: 3px;

  cursor: pointer;
  user-select: none;
}
.close-btn {
  margin-bottom: 1rem;
  min-height: 2rem;
}

.text-popup {
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}

.title-popup {
  text-align: center;
}

Maintenant, occupons-nous de notre App.js

import Popup from "./Popup";
import { useState, useEffect } from "react";

function App() {
  const [CookiePop, setCookiePop] = useState(false);

  useEffect(() => {
    setTimeout(() => {
      setCookiePop(true);
    }, 3000);
  }, []);
  return (
    <div className="App">
      <main>
        <h1>Pop-up</h1>
        <Popup open={CookiePopup} setOpen={setCookiePop}></Popup>
      </main>
    </div>
  );
}

export default App;

Alors regardons cela d’un peu plus près :

On importe notre Popup, et les 2 hooks que nous allons utiliser, c’est-à-dire , useState et useEffect

On créer un state CookiePop et une fonction setCookiePop qui va nous permettre de mettre à jour ce state

Et on lui attribue une valeur initiale qui sera false

Afin de faire apparaître notre Popup nous avons utiliser useEffect , ainsi notre fonction setTimeout qui va nous permettre de faire apparaître notre Popup au bout de 3 secondes est dans un useEffect. En ne mettant aucune dépendance, mais un tableau vide ( [ ] ) nous faisons en sorte que la fonction setTimeout ne soit exécuté une seule fois, il faudra donc refresh la page pour pouvoir la remettre en action.

Enfin nous appelons le composant Popup en lui attribuant les propriétés open, setOpen

Pour finir, il nous faut modifier notre fichier Popup.js

import React from "react";

const Popup = ({ open, setOpen }) => {
  return open ? (
    <div className="wrapper">
      <div className="popup">
        <h3 className="title-popup">Le site respecte votre vie privée</h3>
        <p className="text-popup">
          Ce site utilise des cookies. Vous avez la possibilité de déterminer
          les cookies que vous autorisez ou refusez.
        </p>
        <div className="btn">
          <button className="close-btn" onClick={() => setOpen(false)}>
            Accepter
          </button>
          <button className="close-btn" onClick={() => setOpen(false)}>
            Continuer sur le site sans accepter
          </button>
        </div>
      </div>
    </div>
  ) : null;
};

export default Popup;

On commence par déstructuré les propriétés open, setOpen , ensuite on ajoute aux 2 boutons une fonction onlick qui permet de fermer la pop-up.

Et voila notre pop-up est terminé.