{"_id":"@astrum-ui/modal","_rev":"4-4cc081d71dee0c93e510ebcf5efa559a","name":"@astrum-ui/modal","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@astrum-ui/modal","version":"1.0.0","description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","license":"ISC","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.73","cssnano":"^6.1.2","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.13.2","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.2"},"_id":"@astrum-ui/modal@1.0.0","gitHead":"47ccb722ab4c68475a49dae851d521f328c24253","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-Uvdpseq29zZjZnw0ciJPqX7f1xQoJgZ49RuVxRl4SfOhvVsyM9By1/n1k0zEywsyBEwou8/9ld+auDzPiwUKmg==","shasum":"936f97f72420191700814b6e3c3834caba75f718","tarball":"https://registry.npmjs.org/@astrum-ui/modal/-/modal-1.0.0.tgz","fileCount":14,"unpackedSize":1616546,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+fCmFPMK4t+zc4UcMGobX1o8V8NHkxW1iTmCDKnzcqwIgZhZNxsiaJ49VISkpo7lV+HhKiQLl8+RzJJVsIPsREh8="}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_1.0.0_1712228417731_0.9629405736990297"},"_hasShrinkwrap":false},"1.0.1":{"name":"@astrum-ui/modal","version":"1.0.1","description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","license":"ISC","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.73","cssnano":"^6.1.2","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.13.2","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.2"},"_id":"@astrum-ui/modal@1.0.1","gitHead":"c9b2dc320b183e1fc73674bc5478c467aaf5adbe","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-XLY1XoLNWXd786c9Gz9yKjRjoosxT1EBI1Vv+Y5EUTbL8PwRFmIAgoKT3wy7SFNbEfTyXx3cCNdO8ttFtu68xg==","shasum":"4022b20ff9d715c8ac336cc4efd4621912016478","tarball":"https://registry.npmjs.org/@astrum-ui/modal/-/modal-1.0.1.tgz","fileCount":14,"unpackedSize":1613850,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFM84f+XC/SGEyZDy0oKtkVgK5b6qx0xUjfEbZttSPN4AiAT5I4JZvzgVLUXa7Kmj2Yrt4TqjXXE/mhL45bFUULmFw=="}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_1.0.1_1712232552472_0.6094884452815914"},"_hasShrinkwrap":false},"1.0.2":{"name":"@astrum-ui/modal","version":"1.0.2","description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","license":"ISC","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.73","cssnano":"^6.1.2","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.13.2","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.2"},"_id":"@astrum-ui/modal@1.0.2","gitHead":"e3451736baf4a9a8dfb59927782e71c2faa002c4","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-GEXuJ+hNM1nwOBpxOqSujTFCotgwNBGYWVbWwElocLaPm6WUvNGxN8DECD8DN+Fx1oRO6qoikUOTyRc3/iT5qA==","shasum":"062df9f7926a894c81374f214d62e7b16bff6ec0","tarball":"https://registry.npmjs.org/@astrum-ui/modal/-/modal-1.0.2.tgz","fileCount":14,"unpackedSize":1613327,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEf1gH4TNCN5blp2k7Qa350EYhraKAubf6PFBTAwW8RCAiBu7enS2NT7DIGmEZl6hnNmnho9bKKbwS5GsUVvOXOXkw=="}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_1.0.2_1712238474361_0.2070188637831749"},"_hasShrinkwrap":false},"1.0.3":{"name":"@astrum-ui/modal","version":"1.0.3","description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","license":"ISC","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.73","cssnano":"^6.1.2","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.13.2","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.2"},"_id":"@astrum-ui/modal@1.0.3","gitHead":"65522342b7b12cd85d71cf28a2f6e2da776bfcec","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-cxX1yBKWizYDBDDTM693qMLUk5ffFl7mWfydEFC23Rk9YV45jnAQT5IQoB9GZm33JkXb+I1b0FgWPrI/XRIY4Q==","shasum":"f45218c725979f7d82da20f0a55c41db555e9958","tarball":"https://registry.npmjs.org/@astrum-ui/modal/-/modal-1.0.3.tgz","fileCount":13,"unpackedSize":27294,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA9His5hvpC0JUVCQJTzc92+JmGT706Ks0VLQNKwBNG2AiABn+c/pbECKAihUjw8C/yChUHNBHGMNrzNA9x88+jpaA=="}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_1.0.3_1712239637078_0.30828436078889365"},"_hasShrinkwrap":false},"1.1.0":{"name":"@astrum-ui/modal","version":"1.1.0","description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"npx rollup -c"},"keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","license":"ISC","devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@types/react":"^18.2.73","cssnano":"^6.1.2","postcss":"^8.4.38","postcss-cssnext":"^3.1.1","postcss-nested":"^6.0.1","postcss-simple-vars":"^7.0.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.13.2","rollup-plugin-postcss":"^4.0.2","tslib":"^2.6.2"},"_id":"@astrum-ui/modal@1.1.0","gitHead":"db3441b93553ba07e6b4e274ae1883dd96b23dca","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-SA5vqQ25qfTAsmclix9pzzYGRLP/ye2l8gixfkhIuvYjhFc49dOUMumsMBCJ5yt8uS7BbEg8Gf+w1flAMY9ikw==","shasum":"53a06c530df242e188d8c637f8fad85b87b87d05","tarball":"https://registry.npmjs.org/@astrum-ui/modal/-/modal-1.1.0.tgz","fileCount":13,"unpackedSize":27793,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIFYLG1j9epdwQWal2VvFPdjJdiwTaBUz/4C6Twwly9gIhAIl4g8/ytDONviE7GscnrVp41Qk9UrKnDqvFJS/QRSbX"}]},"_npmUser":{"name":"sagar969","email":"sagarmavai2002@gmail.com"},"directories":{},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/modal_1.1.0_1712330995760_0.7744254547424716"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-04T11:00:17.637Z","1.0.0":"2024-04-04T11:00:17.968Z","modified":"2024-04-05T15:29:56.233Z","1.0.1":"2024-04-04T12:09:12.704Z","1.0.2":"2024-04-04T13:47:54.623Z","1.0.3":"2024-04-04T14:07:17.275Z","1.1.0":"2024-04-05T15:29:56.040Z"},"maintainers":[{"name":"sagar969","email":"sagarmavai2002@gmail.com"}],"description":"Introducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.","homepage":"https://github.com/Sagar969/astrum-ui-modal#readme","keywords":["modal","react","component","react-component","ui","accessible","accessibility"],"repository":{"type":"git","url":"git+https://github.com/Sagar969/astrum-ui-modal.git"},"author":{"name":"Sagar Mavai","email":"sagarmavai2002@gmail.com","url":"https://Sagar969.github.io"},"bugs":{"url":"https://github.com/Sagar969/astrum-ui-modal/issues"},"license":"ISC","readme":"# @astrum-ui/modal\r\n\r\nIntroducing Astrum-UI/Modal: A versatile React component for creating sleek and customizable modal overlays effortlessly.\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save @astrum-ui/modal\r\n```\r\n\r\nor access the [complete suite](https://www.npmjs.com/package/@astrum-ui/core) of components\r\n\r\n```\r\nnpm install --save @astrum-ui/core\r\n```\r\n\r\n## Usage\r\n\r\n```jsx\r\nimport Modal from @astrum-ui/modal\r\nimport { useState } from 'react'\r\n\r\nexport default function HelloModal() {\r\n const [show, setShow] = useState(false)\r\n\r\n return (\r\n <>\r\n\t \r\n

Hello world heading

\r\n\t
Hello world content
\r\n\t \r\n\r\n\t \r\n \r\n )\r\n}\r\n\r\n```\r\n\r\n> **Note** : `h2` must be the direct children of `Modal` to be the heading of modal\r\n\r\n#### More examples\r\n\r\n- [Sign-in form modal](https://stackblitz.com/edit/vitejs-vite-gf6zs6?file=src%2FApp.tsx)\r\n\r\n## Props\r\n\r\nHere's a list of all the props available to customize this modal according to your need\r\n\r\n`* for required`\r\n`- for any value of specified type`\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n
NameTypeDefault ValueAvailable ValuesDescription
show *booleanfalsetrue, falseBoolean indicating whether the modal should be visible
setShow *callback() => {}-Function to toggle the visibility of the modal, called by close button
overlayOpacitynumber0.30 - 1Opacity level of the overlay behind the modal (between 0 and 1)
disableClosebooleanfalsetrue, falseDisable default close methods (closeButton and overlay click)
closeButtonVariantnumber11, 2Variant style of the close button (1 or 2)
CustomCloseButtonComponentTypenull-Custom component to use as the close button
stylesobject{}\r\n{
\r\n modal: {},\r\n overlay: {},\r\n closeButton: {}\r\n
\r\n}\r\n		Custom CSS styles to apply to the modal and its elements
classNamesobject{}\r\n{
\r\n modal: '',\r\n overlay: '',\r\n closeButton: ''\r\n
\r\n}\r\n		Custom class names to apply to the modal and its elements
animateDurationnumber300-Duration of the opening / closing animation (in milliseconds)
animateInstringfadeIn-down\r\nfadeIn,\r\nfadeIn-up,\r\nfadeIn-down,\r\nfadeIn-left,\r\nfadeIn-right,\r\n
\r\nzoomIn,\r\nzoomIn-up,\r\nzoomIn-down,\r\nzoomIn-left,\r\nzoomIn-right,\r\n
\r\nslideIn-up,\r\nslideIn-down,\r\nslideIn-left,\r\nslideIn-right\r\n		Animation effect when the modal opens
animateOutstring''\r\nfadeOut,\r\nfadeOut-up,\r\nfadeOut-down,\r\nfadeOut-left,\r\nfadeOut-right,\r\n
\r\nzoomOut,\r\nzoomOut-up,\r\nzoomOut-down,\r\nzoomOut-left,\r\nzoomOut-right,\r\n
\r\nslideOut-up,\r\nslideOut-down,\r\nslideOut-left,\r\nslideOut-right\r\n		Animation effect when the modal closes
onOpencallback() => {}-Callback function triggered when the modal opens
onOpenStartcallback() => {}-Callback function triggered at the start of the modal opening animation
onOpenEndcallback() => {}-Callback function triggered at the end of the modal opening animation
onClosecallback() => {}-Callback function triggered at the end of the modal closing animation
onCloseStartcallback() => {}-Callback function triggered at the start of the modal closing animation
onCloseEndcallback() => {}-Callback function triggered when modal is removed from the DOM
\r\n","readmeFilename":"README.md"}