npm-modale-lib-react

Modale - Projet 14 - OpenClassrooms

npm-modale-lib-react est une librairie React qui permet d'afficher une modale de confirmation de sauvegarde de formulaire.

Pour utiliser cette librairie dans votre projet React, suivez ces étapes :

🚩 Prérequis

• Node.js version 18.12.1 ou supérieure
• npm version 8.19.2 ou supérieure
• Editeur de texte recommandé: VS Code

🚩 Installation

  ` npm i npm-modale-lib-react `

Une fois l'installation terminée, la bibliothèque est prête à être utilisée dans votre projet.

🚩 Importation

1. Dans le composant où vous souhaitez utiliser la modale, importez la bibliothèque en haut de votre fichier :

import { Modale } from "npm-modale-lib-react"; 

🚩 Utilisation

exemple d'utilisation dans un projet ⤵️

1. Dans le composant où vous souhaitez afficher la modale, créez un état pour gérer sa visibilité :

import React, { useState } from 'react'; 

const [isConfirmationVisible, setIsConfirmationVisible] = useState(false); 

2. Dans votre composant, utilisez la modale en ajoutant le code suivant où vous souhaitez afficher la modale :

{isConfirmationVisible && (
 <div className="overlay">
   <Modale
     showModal={isConfirmationVisible}
     closeModal={handleCloseConfirmation}
     message="Employee Created !"
   />
 </div>
)} 

---

🟩 showModal :(booléen) indique si la modale doit être affichée ou non.

🟨 closeModal :fonction de rappel que vous devez définir pour fermer la modale.

🟦 message :(chaîne de caractères) message que vous souhaitez afficher dans la modale.

---

• Assurez-vous d'ajouter la logique pour gérer la visibilité de la modale en fonction de vos besoins.

---

C'est tout ! Vous avez maintenant intégré avec succès la Modale React Library dans votre projet.