react-modal-wealthhealth

Composant Modal React réutilisable, construit selon un paradigme de programmation fonctionnel et utilisant React Portal.

✨ Fonctionnalités

• Composant fonctionnel (aucune classe)
• Utilisation de React Portal
• Fermeture avec la touche Échap
• Fermeture au clic sur l'overlay
• Blocage du scroll arrière-plan lorsque la modale est ouverte
• Réutilisable et configurable

📦 Installation

Si publié sur npm :

npm install react-modal-wealthhealth

Ou utilisation locale dans un projet React.

🚀 Utilisation

Assurez-vous d'avoir un élément dédié au portal dans votre index.html :

<div id="root"></div>
<div id="modal-root"></div>

Puis importez le composant :

import { Modal } from "react-modal-wealthhealth";

Exemple d'utilisation :

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Succès">
  Employé créé avec succès !
</Modal>

🔧 Props

Prop Type Obligatoire Description

isOpen boolean Oui Contrôle l'affichage de la modale

onClose function Oui Fonction appelée lors de la fermeture

title string Non Titre affiché en haut de la modale

children node Oui Contenu affiché à l'intérieur

🧠 Détails techniques

• Utilise createPortal pour afficher la modale hors de la hiérarchie DOM principale
• Supprime les écouteurs d'événements lors du démontage
• Respecte le paradigme fonctionnel (aucune classe React)
• Code modulaire et maintenable

📄 Licence

ISC