Un composant modal React simple inspiré de kylefox/jquery-modal, utilisé dans l'application HRnet.
npm install react-hrnet-modalCe dépôt contient la modal React que j’ai développée dans le cadre du projet HRnet (OpenClassrooms — Projet 14).
L’objectif était de remplacer l’ancienne modale jQuery (kylefox/jquery-modal) (https://github.com/kylefox/jquery-modal)
utilisée dans l’application HRnet afin de moderniser l’interface et de rendre le projet entièrement React.
J’ai cherché à garder le même comportement que la modale originale, tout en proposant une version plus légère, accessible et adaptée à React.
---
La modale propose toutes les bases nécessaires :
- Un overlay sombre qui bloque l’arrière-plan
- Une boîte de dialogue centrée
- Un bouton de fermeture
- Fermeture via :
- clic sur l’overlay
- clic sur le bouton "close"
- touche Échap
- Blocage du scroll en arrière-plan
- Aucun package externe (hormis React)
- J’ai volontairement gardé une API simple pour qu’elle puisse être réutilisée facilement dans n’importe quel projet.
---
- Node.js ≥ 16
- npm ≥ 8 (or yarn / pnpm)
- React ≥ 17
Je recommande d’utiliser VS Code + ESLint pour faciliter le développement.
---
#### Installation
``bash`
npm install react-hrnet-modalou
yarn add react-hrnet-modal
---
##### Usage
`jsx
import React, { useState } from "react";
import Modal from "react-hrnet-modal";
function Example() {
const [isOpen, setIsOpen] = useState(false);
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
return (
Employee Created!
export default Example;
`
---
###### Component API
`jsx`
onClose={handleClose}
title="Optional title"
/ Props de customisation /
overlayClassName="my-overlay"
modalClassName="my-modal"
titleClassName="my-title"
bodyClassName="my-body"
closeButtonClassName="my-close"
overlayStyle={{ backgroundColor: "rgba(0,0,0,0.5)" }}
modalStyle={{ borderRadius: "20px" }}
>
Modal content goes here.
---
###### # Props
- isOpen — boolean
Active ou désactive l’affichage de la modale.
- onClose — function
Fonction déclenchée lorsque la modale doit se fermer (overlay, bouton ×, Escape).
- title — string, optionnel
Si un titre est fourni, il apparaît au-dessus du contenu.
- children — ReactNode
Contenu de la modale (texte, message, boutons, etc.).
---
###### ## Personnalisation du style
La modale inclut un style par défaut via Modal.css, mais vous pouvez surcharger ou remplacer ces styles.
Option 1 — Via des classnames personnalisées
`jsx`
onClose={close}
modalClassName="custom-box"
overlayClassName="custom-overlay"
closeButtonClassName="custom-close"
>
Custom modal
Exemple CSS utilisateur :
.custom-overlay {
background: rgba(0, 0, 0, 0.4);
}
.custom-box {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 650px;
}
.custom-close {
background: transparent;
color: red;
font-size: 26px;
}
Option 2 — Via des styles inline
`jsx``
onClose={close}
modalStyle={{ padding: "40px", borderRadius: "12px" }}
overlayStyle={{ backgroundColor: "rgba(0,0,0,0.6)" }}
/>
---
###### ### Comportement & différences avec jquery-modal
J’ai repris tous les comportements essentiels de l’ancienne librairie (https://github.com/kylefox/jquery-modal):
- Overlay sombre
- Fenêtre centrée
- Fermeture via bouton × / overlay / Escape
- Blocage du scroll
---
###### #### Fonctionnalités non reprises
Certaines parties du plugin original n’avaient pas d'intérêt dans une application React moderne :
- chargement AJAX intégré
- animations fade-in/out
- gestion de multiples modales empilées
- création automatique via les liens
- spinner automatique
J’ai fait le choix de garder le composant minimaliste, stable et cohérent avec React.
---
###### ##### Auteur
Développé par Iliesse,
dans le cadre du projet OpenClassrooms — Projet 14
“Faites passer une librairie jQuery vers React”
---
###### ###### Licence
MIT License — utilisation libre, personnelle ou commerciale.
---
###### ###### # Remerciements
Modèle initial :
https://github.com/kylefox/jquery-modal
Crédits aux auteurs du plugin jQuery d’origine.