{"_id":"@alexlemars_75/npm-modal","name":"@alexlemars_75/npm-modal","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alexlemars_75/npm-modal","version":"0.1.0","private":false,"main":"dist/index.js","module":"dist/index.js","dependencies":{"@testing-library/jest-dom":"^5.16.4","@testing-library/react":"^13.2.0","@testing-library/user-event":"^13.5.0"},"scripts":{"start":"react-scripts start","build":"rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/cli":"^7.17.10","@babel/core":"^7.18.2","@babel/preset-react":"^7.17.12","react":"^18.1.0","react-dom":"^18.1.0","react-scripts":"5.0.1","web-vitals":"^2.1.4"},"gitHead":"5204af7799ac9ad88ec2a3813386a6c2c53f3dbb","description":"","_id":"@alexlemars_75/npm-modal@0.1.0","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-bXRFx7gUxcUOtRPVV9nnr+i2dw5grURFA+Cr4wJZa4gZrMqrw967XLWymBer80BbrVqQVcuEmlnC0Htiy0dFCA==","shasum":"24d44556879c922d1e89a0f92a1f470c81f96956","tarball":"https://registry.npmjs.org/@alexlemars_75/npm-modal/-/npm-modal-0.1.0.tgz","fileCount":5,"unpackedSize":4276,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtjnkGu0aKa8DLEdI2ZtLY4APTKVxRhvBGxK+7YPAisAIhALZqN9j2UXERYZqldi0GBFkdUGjARtMJBUTP5lwUcF2s"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJioN5aACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3yg/+OwgnRuBqLseRhWFxVZYVuQOxvK+oa2mIiXnGt+lTWwZ4wgLN\r\n4Ilhn79gpUORB7Y4jrWBXU6GiYuNMlrETahfsEaBDECJu4QVTPTxVp/Nv3Pe\r\nEgwoUOnI5+LFTW8Dzvbgtkbdcxpqwj+VGN+TzDdAJKTksC+7xJHpoulpaZPc\r\nqEQtqtuFaSainBi4evKlsIGwnidnQUvpP7lA4MeNoaHSWl2r1NVmkNa6hiPS\r\nOq7Bx+7kicVheoIJASIvlLIqzQz2g7YqbWmbAfuZhgxAtzdstO4zYW3pfApE\r\nW0qkn3VVn99aMeNSTmmSNwZHUVoP/An35q34YiLlVhbeOt8+TTAQ29VOOROl\r\n/lgggdmkbhG+Ec6lFTBePqxAfAD303FdurRcYkTgFsD8JFTIh0EJrB9TYZgK\r\nkCbRz8e7EXwvKuf6nxUGjfQaFBHLEoj7rW7ZsNUQl8pA6MtlSFLby4+jjjzL\r\nwroEwAz/vYL8Fs2W3wBCO0lAlyGYxbr7S6a5srmP3QEt1J/uva+0b9QYZ8dn\r\nMYi7Ylnp7X9+TWqfrLoJi2BkyMmHFrvqeLEivae6VK4Aa0LJvEJVJp7J7zi9\r\nl0MQASEi3BmbxNYvX9a6JXv/dhqWTn7z6ZPb/ZPIzXmxK8hxPKEIY2yle6nq\r\nIlo3b2IsrajzFYOolPki3W9a3PBQQJ1dp9k=\r\n=SvYp\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexlemars_75","email":"alexis.boucher75017@gmail.com"},"directories":{},"maintainers":[{"name":"alexlemars_75","email":"alexis.boucher75017@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/npm-modal_0.1.0_1654709850676_0.6129221111994849"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-08T17:37:30.615Z","0.1.0":"2022-06-08T17:37:30.871Z","modified":"2022-06-08T17:37:31.030Z"},"maintainers":[{"name":"alexlemars_75","email":"alexis.boucher75017@gmail.com"}],"readme":"# Modal-Npm-component \n\n\n## Prerequisites for install\n\n- You need [Node](https://nodejs.org/en/) to run the npm install\n\n- Recommended text editor: [Visual Studio Code](https://code.visualstudio.com)\n\n\n## Why use this modal\n\nThis modal allows the user to be informed that they have completed a form for example\n\n\nThey can open and close it\n\n## How to use it\n\n### Installation\n\n```console\nnpm i alexlemars_75-npm-modal\n```\n\n### Import the componant\n\n```js\nimport { Modal } from 'alexlemars_75--npm-modal';\n```\n\n### Use the component\n\nIf you use useState hook you can do like this :\n\n```js\nimport { Modal } from 'alexlemars_75--npm-modal' \n\nexport default function App() {\n\n  const [visible,setVisible] = useState(false)\n\n  const open = (e)=>{\n    e.preventDefault()\n    setVisible(true)\n  }\n  const close = (e)=>{\n    e.preventDefault()\n    setVisible(false)\n  }\n  return (\n    <div>\n        <main className='home-page'>\n            <button onClick={open}>To make visible<button/>\n            <Modal message=\"Your message !\"  className={visible ? 'modalVisible' : 'modalNotVisible'}  handleNotVisible={close}/>       \n        </main>\n    </div>\n  )\n}\n```\n\n\n\n\n\n\n\n| props                     | type          | description                           |                    \n| ------------------------- | ------------- | ------------------------------------- |\n| message                   | string        |  To edit your message                 | \n| className                 | string        |  To customize the modal               |\n| handleNotVisible          | function      |   function on click to close the modal|\n\n\n\n## Auteur\n* [Boucher Alexis](https://github.com/Alexlemars)#boucher_alexis_14_16052022__npm-modal\n","readmeFilename":"README.md"}