@kevindallancon/hrnet-modal

Composant modale réutilisable développé pour la refonte de l’application HRnet. Ce composant React léger et accessible peut être intégré dans tout projet React pour afficher une fenêtre modale personnalisée.

📦 Objectif du package

• Remplacer les plugins jQuery .modal() dans l’ancienne application HRnet
• Fournir un composant React simple à intégrer, accessible et stylisable
• Publier le composant sous forme de package npm pour réutilisation

⚙️ Technologies utilisées

• React ≥ 16.8 – Composant fonctionnel avec hooks (peerDependency)
• Vite 5 – Outil de build ultra rapide pour librairies modernes
• @vitejs/plugin-react – Intégration JSX/React pour Vite
• vite-plugin-css-injected-by-js – Injection automatique des styles CSS dans le JS (pas besoin d'import manuel)
• ESModules + CommonJS – Build compatible avec tous les environnements (via dist/*.es.js et *.cjs.js)

🚀 Installation

npm install @kevindallancon/hrnet-modal

🧰 Utilisation

  import Modal from '@kevindallancon/hrnet-modal';

function Example() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Succès"
        content="L'employé a bien été enregistré."
        backgroundColor="#ffffff"
      />
    </>
  );
}

🧩 Props

| Prop              | Type       | Requis | Description                                                                 |
|-------------------|------------|--------|-----------------------------------------------------------------------------|
| `isOpen`          | `boolean`  | ✅     | Affiche ou masque la modale                                                |
| `onClose`         | `function` | ✅     | Fonction appelée lors de la fermeture (clic extérieur ou bouton "X")       |
| `title`           | `string`   | ✅     | Titre affiché en haut de la modale                                         |
| `content`         | `string`   | ✅     | Contenu texte affiché dans la modale                                       |
| `backgroundColor` | `string`   | ❌     | Couleur de fond personnalisable de la modale (`#fff`, `#000`, etc.)        |