{"_id":"react-relax-modal","_rev":"30-525b88c2807191b7158d101a149a37e3","time":{"created":"2024-03-17T19:39:23.572Z","0.0.1":"2023-12-10T23:08:22.755Z","modified":"2024-03-17T21:26:24.954Z","0.0.2":"2023-12-10T23:24:41.383Z","0.0.3":"2023-12-10T23:29:37.076Z","0.0.4":"2023-12-10T23:36:28.697Z","0.0.5":"2023-12-12T23:32:02.021Z","0.0.6":"2023-12-13T13:09:28.089Z","0.0.7":"2023-12-13T13:19:54.702Z","0.0.8":"2023-12-13T13:32:48.129Z","0.0.9":"2023-12-13T13:43:45.928Z","0.0.10":"2023-12-13T13:51:23.754Z","0.0.11":"2023-12-14T19:01:49.242Z","0.0.12":"2023-12-15T15:56:29.723Z","0.0.13":"2023-12-15T16:27:27.928Z","0.0.14":"2023-12-15T16:33:58.902Z","0.0.15":"2023-12-15T16:44:07.683Z","0.0.16":"2023-12-15T16:47:16.509Z","0.0.17":"2023-12-15T16:52:58.186Z","0.1.0":"2023-12-15T19:50:49.410Z","0.1.1":"2023-12-15T19:58:08.009Z","0.1.2":"2023-12-15T20:02:12.016Z","0.1.3":"2023-12-18T14:18:53.969Z","0.1.4":"2024-03-15T20:15:25.178Z","0.1.5":"2024-03-15T20:19:08.898Z","0.1.6":"2024-03-15T20:26:51.688Z","0.1.7":"2024-03-15T20:32:31.253Z","0.1.8":"2024-03-15T21:26:25.867Z","0.2.0":"2024-03-17T19:39:23.697Z","0.2.1":"2024-03-17T21:12:40.843Z","0.2.2":"2024-03-17T21:20:34.544Z","0.2.3":"2024-03-17T21:26:24.468Z"},"name":"react-relax-modal","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.0":{"name":"react-relax-modal","version":"0.2.0","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","modal","pop-up"],"repository":{"url":"git+https://github.com/simancasdev/react-relax-modal.git","type":"git"},"release":{"branches":["main"]},"engines":{"node":">=0.10.0"},"dependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18","react-dom":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"},"devDependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^13.0.0","@testing-library/user-event":"^13.2.1","@types/jest":"^27.0.1","@types/node":"^16.7.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","copyfiles":"^2.4.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","rimraf":"^5.0.5","typescript":"5.3.3","web-vitals":"^2.1.0"},"scripts":{"start":"react-scripts start","clean":"rimraf dist/","test":"react-scripts test","copyfiles":"copyfiles -u 1 src/**/*.css dist/","build":"yarn run clean && tsc && yarn run copyfiles"},"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"]},"_id":"react-relax-modal@0.2.0","gitHead":"30d25ec90fb1ad134f722b1678284042150947ab","description":"A easy Modal system for Web React Apps","bugs":{"url":"https://github.com/simancasdev/react-relax-modal/issues"},"homepage":"https://github.com/simancasdev/react-relax-modal#readme","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-MnUYXkcvdl7BoLzr2GiGU+hwz1yUtbYxnU3Wip2CaYcnGDUGKnrp3D1WkEEoX2C0/H6kb9koT1sZWmYSv+FdqA==","shasum":"257d843c81346eb8e8a4dd54e4c56b402cc01523","tarball":"https://registry.npmjs.org/react-relax-modal/-/react-relax-modal-0.2.0.tgz","fileCount":35,"unpackedSize":19907,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRDNTVnuAlJ9AZAcwn9N3af5+3L8WpRiAK/mRcWteIawIhALGuHbmI7bsDf2xcFHNc5rrchEF7GbKs5cvnwFOkjBJm"}]},"_npmUser":{"name":"simancasdev","email":"simancasdev@gmail.com"},"directories":{},"maintainers":[{"name":"simancasdev","email":"simancasdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-relax-modal_0.2.0_1710704363573_0.6886802230820617"},"_hasShrinkwrap":false},"0.2.1":{"name":"react-relax-modal","version":"0.2.1","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","modal","pop-up"],"repository":{"url":"git+https://github.com/simancasdev/react-relax-modal.git","type":"git"},"release":{"branches":["main"]},"engines":{"node":">=0.10.0"},"dependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18","react-dom":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"},"devDependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^13.0.0","@testing-library/user-event":"^13.2.1","@types/jest":"^27.0.1","@types/node":"^16.7.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","copyfiles":"^2.4.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","rimraf":"^5.0.5","typescript":"5.3.3","web-vitals":"^2.1.0"},"scripts":{"start":"react-scripts start","clean":"rimraf dist/","test":"react-scripts test","copyfiles":"copyfiles -u 1 src/**/*.css dist/","build":"yarn run clean && tsc && yarn run copyfiles"},"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"]},"_id":"react-relax-modal@0.2.1","gitHead":"a5b07a243ce891c00223bf76cb02a4ef8f7e0cb9","description":"A easy Modal system for Web React Apps","bugs":{"url":"https://github.com/simancasdev/react-relax-modal/issues"},"homepage":"https://github.com/simancasdev/react-relax-modal#readme","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-+SIhcFpKc7TzKVV1SIEOCU8gXVK35HCfvTVoB29m5Umd/aLwoqivCZuPo0laSt+A9d0RgPo6KwWOD99oqna4/A==","shasum":"ba51dda8c2f5e3bf2651e6f5b55bdd0ab59006cd","tarball":"https://registry.npmjs.org/react-relax-modal/-/react-relax-modal-0.2.1.tgz","fileCount":33,"unpackedSize":19438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjYVus+sWxnJUeHwWUx0CX+RV0/a0tQN/+Zcu3PkEEGAiBs9Vdg57DeFNo8BHkej+Msitwxta+91Fz34mf6/yv5xw=="}]},"_npmUser":{"name":"simancasdev","email":"simancasdev@gmail.com"},"directories":{},"maintainers":[{"name":"simancasdev","email":"simancasdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-relax-modal_0.2.1_1710709960675_0.28658587110697575"},"_hasShrinkwrap":false},"0.2.2":{"name":"react-relax-modal","version":"0.2.2","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","modal","pop-up"],"repository":{"url":"git+https://github.com/simancasdev/react-relax-modal.git","type":"git"},"release":{"branches":["main"]},"engines":{"node":">=0.10.0"},"dependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18","react-dom":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"},"devDependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^13.0.0","@testing-library/user-event":"^13.2.1","@types/jest":"^27.0.1","@types/node":"^16.7.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","copyfiles":"^2.4.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","rimraf":"^5.0.5","typescript":"5.3.3","web-vitals":"^2.1.0"},"scripts":{"start":"react-scripts start","clean":"rimraf dist/","test":"react-scripts test","copyfiles":"copyfiles -u 1 src/**/*.css dist/","build":"yarn run clean && tsc && yarn run copyfiles"},"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"]},"_id":"react-relax-modal@0.2.2","gitHead":"392125e2e8ccf19450ad4d1d3c47bbce4d48cd11","description":"A easy Modal system for Web React Apps","bugs":{"url":"https://github.com/simancasdev/react-relax-modal/issues"},"homepage":"https://github.com/simancasdev/react-relax-modal#readme","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-Xu0xbx/+jmWmNLP96FK3eVcpMFYElZ4pPtZAY200r9AFo0sOhFOaHuWBY9ko5XEr/gM2gvudnOu+0DkK9r38cA==","shasum":"2df85100de187b303ba240e4368e699313dfc0c5","tarball":"https://registry.npmjs.org/react-relax-modal/-/react-relax-modal-0.2.2.tgz","fileCount":33,"unpackedSize":19438,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqeXW1pTd1bFe9z+tTFfthcw6uIxeCsdtwyfHWyPE6WQIhALR1f5ltUkM3advjbh5wfn3RttuHPzLAbGysuaE2lXJy"}]},"_npmUser":{"name":"simancasdev","email":"simancasdev@gmail.com"},"directories":{},"maintainers":[{"name":"simancasdev","email":"simancasdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-relax-modal_0.2.2_1710710434398_0.2782458118828841"},"_hasShrinkwrap":false},"0.2.3":{"name":"react-relax-modal","version":"0.2.3","private":false,"license":"MIT","main":"dist/index.js","typings":"dist/index.d.ts","keywords":["react","modal","pop-up"],"repository":{"url":"git+https://github.com/simancasdev/react-relax-modal.git","type":"git"},"release":{"branches":["main"]},"engines":{"node":">=0.10.0"},"dependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18","react-dom":"^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"},"devDependencies":{"framer-motion":"^10.16.16","react-feather":"^2.0.10","styled-components":"^6.1.1","@testing-library/jest-dom":"^5.14.1","@testing-library/react":"^13.0.0","@testing-library/user-event":"^13.2.1","@types/jest":"^27.0.1","@types/node":"^16.7.13","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","copyfiles":"^2.4.1","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","rimraf":"^5.0.5","typescript":"5.3.3","web-vitals":"^2.1.0"},"scripts":{"start":"react-scripts start","clean":"rimraf dist/","test":"react-scripts test","copyfiles":"copyfiles -u 1 src/**/*.css dist/","build":"yarn run clean && tsc && yarn run copyfiles"},"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"]},"_id":"react-relax-modal@0.2.3","gitHead":"30b66a4cf8056f8568e4ad0cf62b3542d9a81c7c","description":"A easy Modal system for Web React Apps","bugs":{"url":"https://github.com/simancasdev/react-relax-modal/issues"},"homepage":"https://github.com/simancasdev/react-relax-modal#readme","_nodeVersion":"21.5.0","_npmVersion":"10.2.4","dist":{"integrity":"sha512-YHvxfr7+88+YVwZJH8f7+fBwR84HbqFbspAjOslAly71rQJYcReoJfRC3XPwsYOZjb3hKANlczoowOq8AVI+fQ==","shasum":"87360657ee7b8b08098637cf7281a75f2508025d","tarball":"https://registry.npmjs.org/react-relax-modal/-/react-relax-modal-0.2.3.tgz","fileCount":33,"unpackedSize":19447,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCces8r0SlztPCuWgBXWR7rm5j72pkaFm91dn4Ru/ZC/QIgQRlAUviSTDcNLeNj08ItEjkbrmeHTmBTHnUpQryr/pE="}]},"_npmUser":{"name":"simancasdev","email":"simancasdev@gmail.com"},"directories":{},"maintainers":[{"name":"simancasdev","email":"simancasdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-relax-modal_0.2.3_1710710784316_0.08382567894700466"},"_hasShrinkwrap":false}},"maintainers":[{"name":"simancasdev","email":"simancasdev@gmail.com"}],"description":"A easy Modal system for Web React Apps","homepage":"https://github.com/simancasdev/react-relax-modal#readme","keywords":["react","modal","pop-up"],"repository":{"url":"git+https://github.com/simancasdev/react-relax-modal.git","type":"git"},"bugs":{"url":"https://github.com/simancasdev/react-relax-modal/issues"},"license":"MIT","readme":"# react-relax-modal\n\nA easy Modal system for Web React Apps\n\n## Table of Contents\n\n* [Installation](#installation)\n* [Examples](#examples)\n* [RelaxModalProvider Props](#relaxmodalprovider-props)\n* [Modal Config Props](#modal-config)\n\n## Installation\n\nTo install, you can use [npm](https://npmjs.org/) or [yarn](https://yarnpkg.com):\n\n\n    $ npm install --save react-relax-modal\n    $ yarn add react-relax-modal\n \n\n## Examples\n\nHere is a simple example of react-relax-modal being used in an app\n\n```jsx\nimport {RelaxModalProvider, useRelaxModal} from \"react-relax-modal\";\n\nconst modalStyle = {\n  width: 200,\n  height: 200,\n  display: \"flex\",\n  borderRadius: \"5px\",\n  alignItems: \"center\",\n  justifyContent: \"center\",\n  backgroundColor: \"white\",\n};\n\nconst MyModal = () => {\n    return (\n        <div style={modalStyle}>\n            <span>Hello World!</span>\n        </div>\n    );\n};\n\nconst Screen = () => {\n    const {openModal} = useRelaxModal();\n    return <button onClick={() => openModal(<MyModal />)}>Open My Modal</button>;\n};\n\nfunction App() {\n    return (\n        <RelaxModalProvider>\n            <Screen />\n        </RelaxModalProvider>\n    );\n}\n\nexport default App;\n```\n\nYou can find examples in the `examples` directory, which you can run in a\nlocal development server using `npm start` or `yarn run start`.\n\n\n## RelaxModalProvider Props\n\n`RelaxModalProvider` accepts props to set a global configuration and/or get a debug helper for your development process\n\n```jsx\nfunction App() {\n    return (\n        <RelaxModalProvider {/**props */}>\n            {...}\n        </RelaxModalProvider>\n    );\n}\n```\n\n| Attributes          |    Type                           |     Default             | Description                                                                                       |\n| :------------------ | :-------------------------        | :--------------         | :------------------------------------------------------------------------------------------------ |\n| debug               |  `boolean`                        | false                   | If debug is `true` you will see on console the stack of modals and the active one                 |\n| children            |  `JSX.Element` or `JSX.Element[]` | JSX.Element (required)  | The components that you want to get access to the Relax Modal Provider API                        |\n| rootConfig          |  `RelaxModalConfig`               | default Config          | Set an initial `configuration` for all your Modals                                                |\n\n\n\n## Modal Config\n\nEach time that you call `openModal` to open a new modal component you can add configuration object that only will affect that Modal\n\n```jsx\n<button onClick={() => openModal(<YourModalComponent />, {/**config */})}>\n    Open Modal\n</button>\n```\n\n| Attributes          |    Type                         |     Default       | Description                                                                                                                              |\n| :------------------ | :-------------------------      | :--------------   | :--------------------------------------------------------------------------------------------------------------------------------------- |\n| alignment           |  `Alignment`                    | center            | Set the `screen location` of your component that you are providing to the openModal() function                                           |\n| backgroundColor     |  `string`                       | rgba(0,0,0, .6)   | The `background color`                                                                                                                   |\n| closeOnBackdrop     |  `boolean`                      | true              | Set if user `can close` the modal when click on the backdrop                                                                             |\n| autoCloseMS         |  `number` or `undefined`        | undefined         | Set `auto-close duration` for your Modal                                                                                                 |\n| style               |  `CSSProperties` or `undefined` | undefined         | Set `styling` for Modal container                                                                                                        |\n| closeKey            |  `string` or `undefined`        | Escape            | Set what `keyboard key` you want to use to `close` the Modal                                                                             |\n| onClosed            |  `function`                     | undefined         | Set a `callback` when user `close` the Modal                                                                                             |\n| onBackdrop          |  `function`                     | undefined         | Set a `callback` when user `clicks` on the backdrop                                                                                      |\n| closeButton         |  `CloseButton`                  | {show: false, icon: undefined, style: undefined, defaultIconColor: \"#fff\"} | `Personalize` the Modal close Button                                            |\n| animation           |  `Animation`                      | {initial: {transform: \"translateY(4rem)\", opacity: 0}, animate: {transform: \"translateY(0)\", opacity: 1}} | Set `animation` when Modal is `open`           |","readmeFilename":"README.md"}