Création d'un composant Modal réutilisable en React

Introduction

Dans ce laboratoire, nous allons explorer la manière de créer un composant Modal en React qui peut être contrôlé via des événements. Le composant Modal aura un bouton de fermeture, et un écouteur d'événements clavier sera utilisé pour fermer le modal lorsque la touche Échap est pressée. À la fin de ce laboratoire, vous aurez une bonne compréhension de la manière de créer un composant Modal réutilisable qui peut être facilement intégré dans n'importe quel projet React.

Boîte de dialogue modale

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Ce code affiche un composant Modal qui peut être contrôlé via des événements. Pour utiliser le composant, vous pouvez importer Modal une fois et ensuite l'afficher en passant une valeur booléenne à l'attribut isVisible.

Le composant Modal présente les fonctionnalités suivantes :

• Il définit une fonction keydownHandler qui gère tous les événements clavier et appelle onClose lorsque la touche Échap est pressée.
• Il utilise le hook useEffect() pour ajouter ou supprimer l'écouteur d'événements keydown au Document, appelant keydownHandler pour chaque événement.
• Il ajoute un élément <span> stylé qui sert de bouton de fermeture, appelant onClose lorsqu'il est cliqué.
• Il utilise la propriété isVisible transmise par le parent pour déterminer si le modal doit être affiché ou non.
• Il inclut un fichier CSS qui style le composant Modal.

const Modal = ({ isVisible = false, title, content, footer, onClose }) => {
  const keydownHandler = ({ key }) => {
    switch (key) {
      case "Escape":
        onClose();
        break;
      default:
    }
  };

  React.useEffect(() => {
    document.addEventListener("keydown", keydownHandler);
    return () => document.removeEventListener("keydown", keydownHandler);
  });

  return !isVisible ? null : (
    <div className="modal" onClick={onClose}>
      <div className="modal-dialog" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3 className="modal-title">{title}</h3>
          <span className="modal-close" onClick={onClose}>
            &times;
          </span>
        </div>
        <div className="modal-body">
          <div className="modal-content">{content}</div>
        </div>
        {footer && <div className="modal-footer">{footer}</div>}
      </div>
    </div>
  );
};

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.25);
  animation-name: appear;
  animation-duration: 300ms;
}

.modal-dialog {
  width: 100%;
  max-width: 550px;
  background: white;
  position: relative;
  margin: 0 20px;
  max-height: calc(100vh - 40px);
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: slide-in;
  animation-duration: 0.5s;
}

.modal-header,
.modal-footer {
  display: flex;
  align-items: center;
  padding: 1rem;
}

.modal-header {
  border-bottom: 1px solid #dbdbdb;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #dbdbdb;
  justify-content: flex-end;
}

.modal-close {
  cursor: pointer;
  padding: 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-body {
  overflow: auto;
}

.modal-content {
  padding: 1rem;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-in {
  from {
    transform: translateY(-150px);
  }
  to {
    transform: translateY(0);
  }
}

const App = () => {
  const [isModal, setModal] = React.useState(false);
  return (
    <>
      <button onClick={() => setModal(true)}>Cliquez ici</button>
      <Modal
        isVisible={isModal}
        title="Titre de la boîte de dialogue"
        content={<p>Ajoutez votre contenu ici</p>}
        footer={<button>Annuler</button>}
        onClose={() => setModal(false)}
      />
    </>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations! Vous avez terminé le laboratoire sur les boîtes de dialogue modales. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.