{"_id":"@aloasdev/react-modal","_rev":"6-eee8b26c3dde82caf4f6ba17e90372ad","name":"@aloasdev/react-modal","dist-tags":{"latest":"2.0.5"},"versions":{"2.0.0":{"name":"@aloasdev/react-modal","version":"2.0.0","keywords":["modal","react","react-modal","typescript"],"author":{"name":"aloasdev"},"license":"MIT","_id":"@aloasdev/react-modal@2.0.0","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"dist":{"shasum":"5195872a2b783bdfa7b4a9f523b13b37dadbf7f1","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.0.tgz","fileCount":8,"integrity":"sha512-i8wuKfh0xCD64J4Te3zGnKIjQVH5SWHrxOek7S2+LyO5s+k71DatS2+8qY5MoERUsMUMov9Zz9JH0qFADZ24Kw==","signatures":[{"sig":"MEQCIHtM8C0kPeCLb1DlZCkXs1AbhW95EiyjZfS/iMFNKftzAiBpmrQ2lBCYNT1xn3SDoEbNiPy/N4VCzIIg+6wncgj8bQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":6934},"main":"./dist/index.js","type":"module","_from":"file:aloasdev-react-modal-2.0.0.tgz","types":"./dist/index.d.ts","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","bundle":"tsup src/index.ts","preview":"vite preview"},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"_resolved":"C:\\Users\\aloac\\AppData\\Local\\Temp\\09655f3655181639eaf9aa8bd3012759\\aloasdev-react-modal-2.0.0.tgz","_integrity":"sha512-i8wuKfh0xCD64J4Te3zGnKIjQVH5SWHrxOek7S2+LyO5s+k71DatS2+8qY5MoERUsMUMov9Zz9JH0qFADZ24Kw==","repository":{"url":"git+https://github.com/AlexiaFroment/component_modal_npm.git","type":"git"},"_npmVersion":"10.8.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"22.6.0","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^15.15.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/react-modal_2.0.0_1744374365643_0.6829640384290545","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@aloasdev/react-modal","version":"2.0.1","keywords":["modal","react","react-modal","typescript"],"author":{"name":"aloasdev"},"license":"MIT","_id":"@aloasdev/react-modal@2.0.1","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"dist":{"shasum":"193f7887eba81586c5657b6fd1eaec081240cbc7","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.1.tgz","fileCount":7,"integrity":"sha512-P1jvfajcwZVOGCKZ6WVxEmeUX/3OU/RB/eLfDvpBfVnkzJNnDMF8l3LZvpT/3q474OQLMEHk+Zdi4lkUVF2mSw==","signatures":[{"sig":"MEYCIQDlR+9Ebo1uPz/H6+l70hXjLAzkEo3z8s3naTDHLrDJ9AIhAK1PfTeOlyAliE8FD9W1WEnriaTCghyzYHKNeQiaFC8Q","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8397},"main":"./dist/index.js","type":"module","_from":"file:aloasdev-react-modal-2.0.1.tgz","types":"./dist/index.d.ts","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","bundle":"tsup src/index.ts","preview":"vite preview"},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"_resolved":"C:\\Users\\aloac\\AppData\\Local\\Temp\\f74a41cc4172e3df066c36277b811650\\aloasdev-react-modal-2.0.1.tgz","_integrity":"sha512-P1jvfajcwZVOGCKZ6WVxEmeUX/3OU/RB/eLfDvpBfVnkzJNnDMF8l3LZvpT/3q474OQLMEHk+Zdi4lkUVF2mSw==","repository":{"url":"git+https://github.com/AlexiaFroment/component_modal_npm.git","type":"git"},"_npmVersion":"10.8.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"22.6.0","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^15.15.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/react-modal_2.0.1_1744872600330_0.10724525605708357","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@aloasdev/react-modal","version":"2.0.2","keywords":["modal","react","react-modal","typescript"],"author":{"name":"aloasdev"},"license":"MIT","_id":"@aloasdev/react-modal@2.0.2","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"dist":{"shasum":"dbc973f6baddfff8b8c628aa2d1935b6120d04a5","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.2.tgz","fileCount":7,"integrity":"sha512-1c7T9ApR+mxBF+BdABGsaUtQAkw9Tn5l8cyjykYEPfulh9KzMFyI0QxEfQE2jCvsU5l96PrwEyaSuLrdJrSCyQ==","signatures":[{"sig":"MEYCIQCBypOkrREJvy8CCZp9gI4svLSz/5+Ep6vF7i5wFou1CgIhAMfnLWsqjOdZJ3I3biR0cSGGOxBJC10ZkvjnkJ6Vm5HQ","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8726},"main":"./dist/index.js","type":"module","_from":"file:aloasdev-react-modal-2.0.2.tgz","types":"./dist/index.d.ts","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","bundle":"tsup src/index.ts","preview":"vite preview"},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"_resolved":"C:\\Users\\aloac\\AppData\\Local\\Temp\\df274c1438362d49d75a698fe3ba091d\\aloasdev-react-modal-2.0.2.tgz","_integrity":"sha512-1c7T9ApR+mxBF+BdABGsaUtQAkw9Tn5l8cyjykYEPfulh9KzMFyI0QxEfQE2jCvsU5l96PrwEyaSuLrdJrSCyQ==","repository":{"url":"git+https://github.com/AlexiaFroment/component_modal_npm.git","type":"git"},"_npmVersion":"10.8.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"22.6.0","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","style-inject":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^15.15.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/react-modal_2.0.2_1744874665270_0.3499982883916195","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@aloasdev/react-modal","version":"2.0.3","keywords":["modal","react","react-modal","typescript"],"author":{"name":"aloasdev"},"license":"MIT","_id":"@aloasdev/react-modal@2.0.3","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"dist":{"shasum":"faf7dcce691ba2048f764f3cc16ba80695198af1","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.3.tgz","fileCount":7,"integrity":"sha512-rO7CfTLpKmZ8w39M5Y/ph9/xYjzGSsmMxtcqn3d6Nl41pDuF6o78y/fbM7XVLGGeMKZRBHsqeNq4KIABGaddkQ==","signatures":[{"sig":"MEQCIDhMrTFra9N5USk2Ogynye3zRwYzAY7qfm2D9Mwl4anlAiBSaYkus3l5KhdCxCy0KtISMXArDjJ4bEn+eY+QXkhAHQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8726},"main":"./dist/index.js","type":"module","_from":"file:aloasdev-react-modal-2.0.3.tgz","types":"./dist/index.d.ts","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","bundle":"tsup src/index.ts","preview":"vite preview"},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"_resolved":"C:\\Users\\aloac\\AppData\\Local\\Temp\\b0a89df2317a88e4849be02013336f02\\aloasdev-react-modal-2.0.3.tgz","_integrity":"sha512-rO7CfTLpKmZ8w39M5Y/ph9/xYjzGSsmMxtcqn3d6Nl41pDuF6o78y/fbM7XVLGGeMKZRBHsqeNq4KIABGaddkQ==","repository":{"url":"git+https://github.com/AlexiaFroment/component_modal_npm.git","type":"git"},"_npmVersion":"10.8.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"22.6.0","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","style-inject":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^15.15.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/react-modal_2.0.3_1744875034361_0.2301932685490502","host":"s3://npm-registry-packages-npm-production"}},"2.0.4":{"name":"@aloasdev/react-modal","version":"2.0.4","keywords":["modal","react","react-modal","typescript"],"author":{"name":"aloasdev"},"license":"MIT","_id":"@aloasdev/react-modal@2.0.4","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"dist":{"shasum":"d3490dcfbd48ed1ca53e21ded7dcb5f57ade0209","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.4.tgz","fileCount":7,"integrity":"sha512-KJNIMBKMx85b3Dc41T4XuqOHrjO5WHIQx2O1+FPbfIKO5wEKIdnk1sJDn9nfz+C9TNruLD5KzMsaN6WkORwPUA==","signatures":[{"sig":"MEUCIQCmETAKXUhj5iOCsa1uhLxl2Cj4y7aWL2kSdx7+caKeQAIgJ3krUWqviUp4n8nNvW0i8f8XDGlqGf5LCCRzpWgTOC4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8726},"main":"./dist/index.js","type":"module","_from":"file:aloasdev-react-modal-2.0.4.tgz","types":"./dist/index.d.ts","private":false,"scripts":{"dev":"vite","lint":"eslint .","build":"tsc -b && vite build","bundle":"tsup src/index.ts","preview":"vite preview"},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"_resolved":"C:\\Users\\aloac\\AppData\\Local\\Temp\\c95a05cafe4daa233bdcd2494cb79716\\aloasdev-react-modal-2.0.4.tgz","_integrity":"sha512-KJNIMBKMx85b3Dc41T4XuqOHrjO5WHIQx2O1+FPbfIKO5wEKIdnk1sJDn9nfz+C9TNruLD5KzMsaN6WkORwPUA==","repository":{"url":"git+https://github.com/AlexiaFroment/component_modal_npm.git","type":"git"},"_npmVersion":"10.8.2","description":"This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.","directories":{},"_nodeVersion":"22.6.0","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","style-inject":"^0.3.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.4.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^15.15.0","@eslint/js":"^9.21.0","typescript":"~5.7.2","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","typescript-eslint":"^8.24.1","@vitejs/plugin-react":"^4.3.4","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19"},"_npmOperationalInternal":{"tmp":"tmp/react-modal_2.0.4_1747379813481_0.9850021016260311","host":"s3://npm-registry-packages-npm-production"}},"2.0.5":{"name":"@aloasdev/react-modal","private":false,"version":"2.0.5","main":"./dist/index.js","types":"./dist/index.d.ts","type":"module","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","style-inject":"^0.3.0"},"devDependencies":{"@eslint/js":"^9.21.0","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@vitejs/plugin-react":"^4.3.4","eslint":"^9.21.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","globals":"^15.15.0","tsup":"^8.4.0","typescript":"~5.7.2","typescript-eslint":"^8.24.1","vite":"^6.2.0"},"author":{"name":"aloasdev"},"license":"MIT","keywords":["modal","react","react-modal","typescript"],"repository":{"type":"git","url":"git+https://github.com/AlexiaFroment/component_modal_npm.git"},"scripts":{"dev":"vite","build":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","bundle":"tsup src/index.ts"},"_id":"@aloasdev/react-modal@2.0.5","description":"Un composant **Modal React** prêt à l'emploi avec **TypeScript**, facile à intégrer dans ton projet. Le style est injecté automatiquement via `style-inject`, mais tu peux le **personnaliser** via des props.","bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","_integrity":"sha512-85KWNMgZWqjfzIqmdyWQvsuysKgk7fCn55l3mK5rwH0XpYQcrYXLxoS4awFLobhOvEogZxktYWCKq/k5ugM4ew==","_resolved":"C:\\Windows\\Temp\\139aac39c14306a70110cc6eba9a84aa\\aloasdev-react-modal-2.0.5.tgz","_from":"file:aloasdev-react-modal-2.0.5.tgz","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-85KWNMgZWqjfzIqmdyWQvsuysKgk7fCn55l3mK5rwH0XpYQcrYXLxoS4awFLobhOvEogZxktYWCKq/k5ugM4ew==","shasum":"bba372b65f155da662db23f394d325a28a8a9fd8","tarball":"https://registry.npmjs.org/@aloasdev/react-modal/-/react-modal-2.0.5.tgz","fileCount":7,"unpackedSize":9007,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIE7+WD/sROSPWmT7jg6ixhstwLsb3C7xvHx2W/RMD4qwAiAovGGnSC9WxYXnEvizaZn2F82m32p/lpaJGEaKGC+F+A=="}]},"_npmUser":{"name":"aloacmoi","email":"aloacmoi@gmail.com"},"directories":{},"maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-modal_2.0.5_1756655505924_0.5494869853165745"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-11T12:26:05.576Z","modified":"2025-08-31T15:51:46.271Z","2.0.0":"2025-04-11T12:26:05.838Z","2.0.1":"2025-04-17T06:50:00.498Z","2.0.2":"2025-04-17T07:24:25.454Z","2.0.3":"2025-04-17T07:30:34.547Z","2.0.4":"2025-05-16T07:16:53.668Z","2.0.5":"2025-08-31T15:51:46.111Z"},"bugs":{"url":"https://github.com/AlexiaFroment/component_modal_npm/issues"},"author":{"name":"aloasdev"},"license":"MIT","homepage":"https://github.com/AlexiaFroment/component_modal_npm#readme","keywords":["modal","react","react-modal","typescript"],"repository":{"type":"git","url":"git+https://github.com/AlexiaFroment/component_modal_npm.git"},"description":"Un composant **Modal React** prêt à l'emploi avec **TypeScript**, facile à intégrer dans ton projet. Le style est injecté automatiquement via `style-inject`, mais tu peux le **personnaliser** via des props.","maintainers":[{"name":"aloacmoi","email":"aloacmoi@gmail.com"}],"readme":"# React Modal Component\n\nUn composant **Modal React** prêt à l'emploi avec **TypeScript**, facile à intégrer dans ton projet. Le style est injecté automatiquement via `style-inject`, mais tu peux le **personnaliser** via des props.\n\n---\n\n## 1️⃣ Installation du component\n\nInstalle le package avec pnpm ou npm :\n\n```bash\npnpm add @aloasdev/react-modal\n```\n\nou avec npm :\n\n```bash\nnpm install @aloasdev/react-modal\n```\n\n## 2️⃣ Importer le composant\n\n```tsx\nimport Modal from \"@aloasdev/react-modal\"\n```\n\n## 3️⃣ Exemple d'utilisation simple\n\n```tsx\nimport { useState } from \"react\"\nimport Modal from \"@aloasdev/react-modal\"\n\nexport default function Example() {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <>\n      <button onClick={() => setIsOpen(true)}>Open Modal</button>\n      <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>\n        <p>Hello, this is a modal!</p>\n      </Modal>\n    </>\n  )\n}\n```\n\n## 4️⃣ Personnaliser le style\n\n### Couleur de l'overlay\n\nTu peux changer la couleur de fond de l'overlay via la prop `overlayColor` :\n\n```tsx\n<Modal\n  isOpen={isOpen}\n  onClose={() => setIsOpen(false)}\n  overlayColor='rgba(0, 0, 255, 0.5)'>\n  <p>Hello World 🚀</p>\n</Modal>\n```\n\n## 5️⃣ Props disponibles\n\nisOpen: boolean\nonClose: () => void\nchildren: React.ReactNode\noverlayColor?: string\n\n## 6️⃣ Fermeture\n\nLe composant se ferme :\n\n- Au clic sur le bouton X\n- Au clic sur l'overlay (hors du contenu de la modal)\n\nLe clic à l'intérieur de la modal ne ferme pas la fenêtre grâce à `stopPropagation()`.\n\n## 7️⃣ Exemple complet avec customisation\n\n```tsx\n<Modal\n  isOpen={isModalOpen}\n  onClose={() => setIsModalOpen(false)}\n  overlayColor='rgba(255, 0, 0, 0.5)'>\n  <p>{`${currentEmployee.firstname} created with success 🎉`}</p>\n</Modal>\n```\n","readmeFilename":"README.md"}