{"_id":"@ach90/hrnet-modal","_rev":"4-2cdaee0265d6e49db77ce08aa576271c","name":"@ach90/hrnet-modal","dist-tags":{"latest":"0.2.2"},"versions":{"0.1.0":{"name":"@ach90/hrnet-modal","version":"0.1.0","_id":"@ach90/hrnet-modal@0.1.0","maintainers":[{"name":"ach90","email":"chassagne.alexandre@gmail.com"}],"dist":{"shasum":"0748480b03fc37c56b08eab935da6caca4e00b60","tarball":"https://registry.npmjs.org/@ach90/hrnet-modal/-/hrnet-modal-0.1.0.tgz","fileCount":4,"integrity":"sha512-P/XHHhFUKFtf2Kn4n1+xDphRaqidUgMYGmiwkpAIHJxOGlwco/+IXVBKLB6gTIHmlJGV4v+xWdZrk0vwYSFZpA==","signatures":[{"sig":"MEQCIDqp9LVZWjQgB/L4k8nuEap81hGsNzfRWapAYyQwgQrZAiAEPxoucEc/lX9NecqD4ZwnRGI5P7xpUCpdtPGw6U+dxA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18927},"main":"dist/hrnet-modal.js","style":"dist/modal.css","types":"dist/index.d.ts","module":"dist/hrnet-modal.mjs","exports":{".":{"import":"./dist/hrnet-modal.mjs","require":"./dist/hrnet-modal.js"},"./style.css":{"default":"./dist/style.css"}},"scripts":{"build":"vite build"},"_npmUser":{"name":"ach90","email":"chassagne.alexandre@gmail.com"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-react":"^4.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hrnet-modal_0.1.0_1748352286440_0.3714448070431442","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@ach90/hrnet-modal","version":"0.2.0","keywords":["react","modal","react-modal"],"_id":"@ach90/hrnet-modal@0.2.0","maintainers":[{"name":"ach90","email":"chassagne.alexandre@gmail.com"}],"homepage":"https://github.com/ach90/hrnet-modal#readme","bugs":{"url":"https://github.com/ach90/hrnet-modal/issues"},"dist":{"shasum":"c40c3632ce51783be71f046f189033a31dc2f96e","tarball":"https://registry.npmjs.org/@ach90/hrnet-modal/-/hrnet-modal-0.2.0.tgz","fileCount":5,"integrity":"sha512-wuOm4tjzzTilILGmA4pTgzVpo57jKyOSAQLX6vfNtQRpjYBbnakBRt9RMMbuKPCSDzmBnpLEM4wG/d77Kilxfg==","signatures":[{"sig":"MEYCIQDG0Q57qwI6CRaiyzRZP7iQOIrT+bC4iDf2P6qFxvtbJwIhAL18fJNPLauCqIuE7ZlhLLnPbyWmX+pLbv2+fbzHzvlE","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19097},"main":"dist/hrnet-modal.js","style":"dist/modal.css","types":"dist/index.d.ts","module":"dist/hrnet-modal.mjs","exports":{".":{"import":"./dist/hrnet-modal.mjs","require":"./dist/hrnet-modal.js"},"./style.css":{"default":"./dist/style.css"}},"gitHead":"055e3df0eb9fef7006e3b030f04d457c86e70ad4","scripts":{"build":"vite build"},"_npmUser":{"name":"ach90","email":"chassagne.alexandre@gmail.com"},"repository":{"url":"git+https://github.com/ach90/hrnet-modal.git","type":"git"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-react":"^4.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hrnet-modal_0.2.0_1748353281972_0.09998354196900094","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@ach90/hrnet-modal","version":"0.2.1","keywords":["react","modal","react-modal"],"_id":"@ach90/hrnet-modal@0.2.1","maintainers":[{"name":"ach90","email":"chassagne.alexandre@gmail.com"}],"homepage":"https://github.com/ach90/hrnet-modal#readme","bugs":{"url":"https://github.com/ach90/hrnet-modal/issues"},"dist":{"shasum":"3203dda7e29719dc41657356a32da03690aca625","tarball":"https://registry.npmjs.org/@ach90/hrnet-modal/-/hrnet-modal-0.2.1.tgz","fileCount":5,"integrity":"sha512-rObBOm01Wj+DI2AStjSOe34wqo0+T50V86o7xtRnRXx2FAwIlSOcMy9/D0i0BIb/mauzz1q4THHuKTYKFyC+4Q==","signatures":[{"sig":"MEYCIQCWvkgH8PMJc9oX7kUInAPl278adKwf50Bw2LEPlMRGKwIhAPGSmiOctopnK93C3EK0AEi7EKP+G641dVNsTIfUwu64","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19174},"main":"dist/hrnet-modal.js","style":"dist/modal.css","types":"dist/index.d.ts","module":"dist/hrnet-modal.mjs","exports":{".":{"import":"./dist/hrnet-modal.mjs","require":"./dist/hrnet-modal.js"},"./style.css":{"default":"./dist/style.css"}},"gitHead":"a7a9e51a0379c97c358c28a0ad2e67970b0290c3","scripts":{"build":"vite build","release":"npm version patch && git push --follow-tags && npm publish"},"_npmUser":{"name":"ach90","email":"chassagne.alexandre@gmail.com"},"repository":{"url":"git+https://github.com/ach90/hrnet-modal.git","type":"git"},"_npmVersion":"10.9.2","directories":{},"_nodeVersion":"23.11.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.0","@vitejs/plugin-react":"^4.0.0"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/hrnet-modal_0.2.1_1748353918400_0.7868975234812265","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@ach90/hrnet-modal","version":"0.2.2","main":"dist/hrnet-modal.js","module":"dist/hrnet-modal.mjs","style":"dist/modal.css","types":"dist/index.d.ts","exports":{".":{"require":"./dist/hrnet-modal.js","import":"./dist/hrnet-modal.mjs"},"./style.css":{"default":"./dist/style.css"}},"scripts":{"build":"vite build","release":"npm version patch && git push --follow-tags && npm publish"},"keywords":["react","modal","react-modal"],"repository":{"type":"git","url":"git+https://github.com/ach90/hrnet-modal.git"},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","react-dom":"^18.0.0 || ^19.0.0"},"devDependencies":{"@vitejs/plugin-react":"^4.0.0","vite":"^5.0.0"},"_id":"@ach90/hrnet-modal@0.2.2","gitHead":"e91146fb1e2867685cf599709d7d6c939aa667ca","description":"Un composant **React** léger, accessible et sans dépendances externes pour afficher une **modale personnalisée** dans vos projets.","bugs":{"url":"https://github.com/ach90/hrnet-modal/issues"},"homepage":"https://github.com/ach90/hrnet-modal#readme","_nodeVersion":"23.11.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-n0UGa8bgINqiO4y/YMXjy68BZxfdybMvNn0BcxP15Xuh11CyXJexEsnWigULHZP5R05f8cWDq/X8xDX9g+c4OA==","shasum":"6a18a77f60c4d05258c7d475d44ecbdf42b0d41e","tarball":"https://registry.npmjs.org/@ach90/hrnet-modal/-/hrnet-modal-0.2.2.tgz","fileCount":5,"unpackedSize":22618,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICl+OXviNtsaLzTdKHrwbLHuWTsc9mzJf5wEUMPdsz97AiEAuedP1TnRYVdfJ+vl7V9YH76zcL4V69IMqSHAwKQExKA="}]},"_npmUser":{"name":"ach90","email":"chassagne.alexandre@gmail.com"},"directories":{},"maintainers":[{"name":"ach90","email":"chassagne.alexandre@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hrnet-modal_0.2.2_1748443693376_0.7884016923011008"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-27T13:24:46.331Z","modified":"2025-05-28T14:48:13.718Z","0.1.0":"2025-05-27T13:24:46.616Z","0.2.0":"2025-05-27T13:41:22.146Z","0.2.1":"2025-05-27T13:51:58.588Z","0.2.2":"2025-05-28T14:48:13.555Z"},"bugs":{"url":"https://github.com/ach90/hrnet-modal/issues"},"homepage":"https://github.com/ach90/hrnet-modal#readme","keywords":["react","modal","react-modal"],"repository":{"type":"git","url":"git+https://github.com/ach90/hrnet-modal.git"},"maintainers":[{"name":"ach90","email":"chassagne.alexandre@gmail.com"}],"readme":"# hrnet-modal (FR)\r\n\r\nUn composant **React** léger, accessible et sans dépendances externes pour afficher une **modale personnalisée** dans vos projets.\r\n\r\n## ✨ Fonctionnalités\r\n\r\n- **Accessibilité** : rôle ARIA, focus piégé dans la modale, fermeture au clavier (`Escape`)\r\n- **Design personnalisable** : styles CSS modulaires\r\n- **Empêche le scroll** de l’arrière-plan lors de l’ouverture\r\n- **Interaction naturelle** : clic en dehors pour fermer, bouton de fermeture\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm i @ach90/hrnet-modal\r\n```\r\n\r\n## 🧑‍💻 Utilisation de base\r\n\r\n``` javascript\r\nimport React, { useState } from \"react\";\r\nimport Modal from \"hrnet-modal\";\r\nimport \"hrnet-modal/dist/style.css\"; // N'oubliez pas d'importer les styles !\r\n\r\nfunction App() {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <button onClick={() => setIsOpen(true)}>Ouvrir la modale</button>\r\n\r\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>\r\n        <h2>Bienvenue !</h2>\r\n        <p>Ceci est le contenu de votre modale.</p>\r\n        <button onClick={() => setIsOpen(false)}>Fermer</button>\r\n      </Modal>\r\n    </>\r\n  );\r\n}\r\n```\r\n\r\n## 🧩 Props \r\n\r\nProp\t    Type\t    Description\r\nisOpen\t    boolean\t    Contrôle si la modale est affichée (true) ou non (false)\r\nonClose\t    function\tFonction appelée quand la modale doit être fermée (clic extérieur, ESC, etc.)\r\nchildren\tReactNode\tContenu affiché dans la modale\r\n\r\n## 🎨 Personnalisation des styles\r\n\r\nPar défaut, la modale utilise des styles définis dans style.css (Modal.module.css compilé).\r\n\r\nPour personnaliser :\r\n\r\nÉcrase les classes CSS avec des sélecteurs spécifiques\r\n\r\nOu copie le composant et applique ton propre fichier CSS\r\n\r\n\r\n-------------\r\n\r\n\r\n# hrnet-modal (EN)\r\n\r\nA lightweight and **accessible React modal component** with **no external dependencies**, designed to integrate easily into your projects.\r\n\r\n## ✨ Features\r\n\r\n- **Accessibility built-in**: ARIA roles, focus trapping, ESC key to close\r\n- **Customizable design**: modular CSS styling\r\n- **Prevents background scrolling** when modal is open\r\n- **Natural interaction**: close on outside click or via close button\r\n\r\n---\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm i @ach90/hrnet-modal\r\n```\r\n\r\n## 🧑‍💻 Basic Usage\r\n\r\n``` javascript\r\nimport React, { useState } from \"react\";\r\nimport Modal from \"hrnet-modal\";\r\nimport \"hrnet-modal/dist/style.css\"; // N'oubliez pas d'importer les styles !\r\n\r\nfunction App() {\r\n  const [isOpen, setIsOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <button onClick={() => setIsOpen(true)}>Open Modal</button>\r\n\r\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>\r\n        <h2>Welcome!</h2>\r\n        <p>This is the content of your modal.</p>\r\n        <button onClick={() => setIsOpen(false)}>Close</button>\r\n      </Modal>\r\n    </>\r\n  );\r\n}\r\n```\r\n\r\n## 🧩 Props \r\n\r\nProp\t    Type\t    Description\r\nisOpen\t    boolean\t    Controls whether the modal is visible (true) or hidden (false)\r\nonClose\t    function\tFunction called when the modal should be closed (outside click, ESC, etc.)\r\nchildren\tReactNode\tThe content to display inside the modal\r\n\r\n## 🎨 Styling Customization\r\n\r\nBy default, the modal uses styles defined in style.css (compiled from Modal.module.css).\r\n\r\nTo customize:\r\n\r\nOverride the CSS classes with more specific selectors\r\n\r\nOr copy the component and apply your own CSS styles","readmeFilename":"README.md","description":"Un composant **React** léger, accessible et sans dépendances externes pour afficher une **modale personnalisée** dans vos projets."}