@kyssii_gtml/modal-lib-p14 NPM

@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
└── ...