@kyssii_gtml/modal-lib-p14/README.md

Package-modal_P14

# @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 (
    <>
      <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>
      <Modal isOpen={isOpen} onStateChange={handleStateModale}>
        <h2>Contenu de la modale</h2>
      </Modal>
    </>
  )
}
```

## ⚙️ 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.