@kyssii_gtml/modal-lib-p14

> Modal React Component – Project P14 | OpenClassrooms

Une librairie React simple et accessible pour afficher une fenêtre modale réutilisable avec gestion du style, du focus, et fermeture par clic extérieur ou touche ESC.

---

✨ Features

- ✅ Composant 100% React
- 🎨 Stylé avec SCSS
- ♿ Accessibilité (fermeture avec ESC / clic extérieur)
- 📦 Facilement intégrable dans vos projets

---

📦 Installation

``bash
npm install @kyssii_gtml/modal-lib-p14
`

🛠️ Utilisation
`jsx
import Modal from '@kyssii_gtml/modal-lib-p14'
import '@kyssii_gtml/modal-lib-p14/dist/modal-lib-p14.css'

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

const handleStateModale = (value) => {
setIsOpen(value)
return true
}

return (
<>
setIsOpen(true)}>Ouvrir la modale

Contenu de la modale

)
}
`

⚙️ Props

| Prop | Type | Description |
|---------------|----------|------------------------------------------|
| isOpen | boolean | Détermine si la modale est affichée |
| onStateChange | function | Fonction appelée à la fermeture de la modale |
| children | node | Contenu affiché à l’intérieur de la modale |

🚀 Lancer en local (démo)

Installer les dépendances

npm install

Builder la librairie

npm run build

Builder la démo en mode watch

npm run dev:demo

Lancer un serveur local (http://localhost:3000)

npm run serve

📁 Arborescence

`
modal-lib/
├── demo/ # Projet de démonstration
├── dist/ # Bundle généré à publier
├── src/ # Code source de la librairie
├── rollup.config.js
├── rollup.demo.config.mjs
└── ...
``

🧑‍💻 Auteur

👤 KANDO Jason
Projet réalisé dans le cadre du parcours Développeur Front-End – OpenClassrooms

📝 Licence
Distribué sous la licence MIT.