{"_id":"@barthrachel/modal_component","_rev":"4-eb4902f1f2fe45bd414a8b8f0a32e003","name":"@barthrachel/modal_component","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.2":{"name":"@barthrachel/modal_component","version":"0.1.2","private":false,"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"dependencies":{"@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","styled-components":"^6.1.8","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/ModalComponent --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.23.4","@babel/core":"^7.23.7","@babel/preset-env":"^7.23.8","@babel/preset-react":"^7.23.3"},"_id":"@barthrachel/modal_component@0.1.2","gitHead":"ee2b6a6fbb69228f18b55c05ea42800dc27a9aba","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-iSL5y+Alvpmcme+8sUCgR7Dr7VasTEpQ3DX8h9gkETZINXycdNtmW4AlC/H1S2AXZ2dMpYcVpNFLLpcPUWS1jw==","shasum":"1fc636868aacd6861ec5e804c553df7d953d2c43","tarball":"https://registry.npmjs.org/@barthrachel/modal_component/-/modal_component-0.1.2.tgz","fileCount":15,"unpackedSize":33715,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNivU8WF6eJ/9+rDTze8hWuw8eAvpGselZXlttjPkE7AiEA6nJ8Dhrj4S/fCb1z0KJv0BSfMdUTKb0Z7WQdATWtHZs="}]},"_npmUser":{"name":"barthrachel","email":"rachel-barth@live.fr"},"directories":{},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_component_0.1.2_1705430280493_0.1480157969509761"},"_hasShrinkwrap":false},"0.1.3":{"name":"@barthrachel/modal_component","version":"0.1.3","private":false,"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"dependencies":{"@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","styled-components":"^6.1.8","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/ModalComponent --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.23.4","@babel/core":"^7.23.7","@babel/preset-env":"^7.23.8","@babel/preset-react":"^7.23.3"},"_id":"@barthrachel/modal_component@0.1.3","gitHead":"3d89c0dfc9859aeac4cc240bdcc6c8198f0c96d3","description":"This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-M5fpUSRgbRJAtH77hMEEtJdwktJUaW/lurvec0gKV8nLY4zyScEBpqEmfnNH7o/RaaU8st/R7mNJxCu4iw//Xg==","shasum":"955d8bee6863fea598f0d6542a34815ec871199c","tarball":"https://registry.npmjs.org/@barthrachel/modal_component/-/modal_component-0.1.3.tgz","fileCount":15,"unpackedSize":33858,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZPfkcYSVHmeFMTJ/XCreY47wKUCBPO13GAVi18uUqnQIgcevs7fkT+zC0Acq+vz2+Z5A4eLwlVaASPMBchpD47Rs="}]},"_npmUser":{"name":"barthrachel","email":"rachel-barth@live.fr"},"directories":{},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_component_0.1.3_1705431911921_0.6400303331645052"},"_hasShrinkwrap":false},"0.1.4":{"name":"@barthrachel/modal_component","version":"0.1.4","private":false,"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"dependencies":{"@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","styled-components":"^6.1.8","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/ModalComponent --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.23.4","@babel/core":"^7.23.7","@babel/preset-env":"^7.23.8","@babel/preset-react":"^7.23.3"},"_id":"@barthrachel/modal_component@0.1.4","gitHead":"dcc20fd2ced3116a301b285babe408bfda4c1fc1","description":"[](https://badge.fury.io/js/@barthrachel%2Fmodal_component)","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-gLA/y2FYFimf9/3cIfoVd3YffCaqb6f35gdWfA5C2182FPU5/JtdVyUgb4w0ufBySln8kEqZJ2BjhhhHW5fSJw==","shasum":"d1e68c708dde485e185ac1e32067ecc51c192efe","tarball":"https://registry.npmjs.org/@barthrachel/modal_component/-/modal_component-0.1.4.tgz","fileCount":23,"unpackedSize":151776,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUgAjwKKpw1P5rid/V03hKBbGGdzJhTK3N527xiPdlVAiEAqw78kAZ9Fav1xbDDUBli4soDzi6+D4hzc4Wvh8f+qL0="}]},"_npmUser":{"name":"barthrachel","email":"rachel-barth@live.fr"},"directories":{},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_component_0.1.4_1705508526384_0.09861457891329772"},"_hasShrinkwrap":false},"0.1.5":{"name":"@barthrachel/modal_component","version":"0.1.5","private":false,"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"dependencies":{"@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","styled-components":"^6.1.8","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/ModalComponent --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.23.4","@babel/core":"^7.23.7","@babel/preset-env":"^7.23.8","@babel/preset-react":"^7.23.3"},"_id":"@barthrachel/modal_component@0.1.5","gitHead":"41af93a1b2b0600732361d0e2008894a317512c1","description":"[](https://badge.fury.io/js/@barthrachel%2Fmodal_component)","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-FLCM1F4OaJ/5VAaHBwOZuUj1AT2e5GFC0vIus9bFSxQDWjYkBegHxLIJE7ePcZSlJ9/BGmSWAU9QgZBP8tzxmg==","shasum":"fef2764cfeae153ceaa24a8445e1e3fc235f778e","tarball":"https://registry.npmjs.org/@barthrachel/modal_component/-/modal_component-0.1.5.tgz","fileCount":23,"unpackedSize":153030,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpN9VB7b/eIw0BtgS0P0X37h6KnMsprjVWMaeePo7iZQIgd9sfa8tBPc6NPPzsMRCsLRH7vJ9abFYYjAxKeTAj/Jo="}]},"_npmUser":{"name":"barthrachel","email":"rachel-barth@live.fr"},"directories":{},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_component_0.1.5_1705599650087_0.07873147435574368"},"_hasShrinkwrap":false},"0.1.6":{"name":"@barthrachel/modal_component","version":"0.1.6","private":false,"main":"dist/index.js","module":"dist/index.js","babel":{"presets":["@babel/preset-env","@babel/preset-react"]},"dependencies":{"@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","styled-components":"^6.1.8","web-vitals":"^2.1.4"},"scripts":{"start":"react-scripts start","build":"SET NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src/components/ModalComponent --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.23.4","@babel/core":"^7.23.7","@babel/preset-env":"^7.23.8","@babel/preset-react":"^7.23.3"},"_id":"@barthrachel/modal_component@0.1.6","gitHead":"5d6bb086680660802307ec6ada7803ccddde6816","description":"[](https://badge.fury.io/js/@barthrachel%2Fmodal_component)","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-FyZM3zVxwsUkNH3P+1Kyyhgno6a9rvd7T6s5YSJ8k+BgO2g1BXbpx3mwmCx29x2sPPj85ur4Yz2F39cCx5iJ0A==","shasum":"f7feda84b937df10d72693547267c7fc445ede77","tarball":"https://registry.npmjs.org/@barthrachel/modal_component/-/modal_component-0.1.6.tgz","fileCount":23,"unpackedSize":153033,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2Y85pFYv+w1GCnTpmIsIWQD+oCRRJU0CvmFinyjGd9AiADmUqgel3L20TSU5SnV1CGzFv0lhIbNEucgJ0z+3qvoQ=="}]},"_npmUser":{"name":"barthrachel","email":"rachel-barth@live.fr"},"directories":{},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_component_0.1.6_1706004919942_0.172952554006506"},"_hasShrinkwrap":false}},"time":{"created":"2024-01-16T18:38:00.387Z","0.1.2":"2024-01-16T18:38:00.644Z","modified":"2024-01-23T10:15:20.397Z","0.1.3":"2024-01-16T19:05:12.083Z","0.1.4":"2024-01-17T16:22:06.552Z","0.1.5":"2024-01-18T17:40:50.313Z","0.1.6":"2024-01-23T10:15:20.225Z"},"maintainers":[{"name":"barthrachel","email":"rachel-barth@live.fr"}],"description":"[](https://badge.fury.io/js/@barthrachel%2Fmodal_component)","readme":"# React Modal Component\n\n[](https://badge.fury.io/js/@barthrachel%2Fmodal_component)\n\nA reusable Modal Component for React.\n\n\n\n#\n\nThis React plugin was created for Project 14 of the \"Application Developer - JavaScript React\" training course for OpenClassrooms. [You can find the repo linked to this project right here.](https://github.com/barthRachel/hrnet)\n\n#\n\n# Table of contents\n\n- [Installation](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#installation)\n- [Configuration](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#configuration)\n - [Default modal](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#default-modal)\n - [Change button text](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#change-button-text)\n - [Close (cross) button](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#close-cross-button)\n - [Ok and close (cross) button](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#ok-and-close-cross-button)\n - [Change button color](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#change-button-color)\n - [Change background color](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#change-background-color)\n - [Change shadow color](https://github.com/barthRachel/ModalComponent?tab=readme-ov-file#change-shadow-color)\n\n# Installation\n\nYou can install the [package](https://www.npmjs.com/package/@barthrachel/modal_component) via npm by typing the following command : \n\n```bash\nnpm install @barthrachel/modal_component\n```\n\nThis example shows how to include this default component in your page :\n```jsx\nimport React, { useState } from \"react\";\nimport Modal from '@barthrachel/modal_component/dist/Modal';\n\nconst YourPage = () => {\n const [openModal, setOpenModal] = useState(false);\n\n // Add a change-of-state condition with setOpenModal\n\n const closeModal = () => {\n setOpenModal(false)\n }\n\n return(\n \n /* The body of your page */\n\n {\n openModal && (\n \n )\n }\n
\n )\n}\n```\n\n# Configuration\n\n## Default Modal\n\nThe default component is described by :\n\n```jsx\n\n```\n\n\n\n## Change button text\n\nBy default, the confirmation button is an \"Ok\" button, but you can change this text with the \"buttonText\" prop :\n\n```jsx\n\n```\n\n\n\n## Close (cross) button\n\nIf, instead of an \"Ok\" button, you want a close button, you can use the \"cross\" prop :\n\n```jsx\n\n```\n\n\n\n## Ok and close (cross) button\n\nIt's also possible to have both types of button by adding the \"button\" prop :\n\n```jsx\n\n```\n\n\n\n## Change button color\n\nIf you want to change the color of the buttons, you can use the \"buttonColor\" prop with a string value representing the color in hexadecimal without the # :\n\n```jsx\n\n```\n\n\n\n## Change background color\n\nYou can change the background color using the \"mainBackgroundColor\" prop in the same way as the \"buttonColor\" prop :\n\n```jsx\n\n```\n\n\n\n## Change shadow color\n\nYou can change the color of the modal's shadow using the \"shadowModalColor\" prop in the same way as the \"buttonColor\" prop :\n\n```jsx\n\n```\n\n","readmeFilename":"README.md"}