@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

npm install @kyssii_gtml/modal-lib-p14

🛠️ Utilisation

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.