{"_id":"@339rama/react-modal-system","name":"@339rama/react-modal-system","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@339rama/react-modal-system","version":"1.0.0","description":"Simple modal provider for react app","scripts":{"build":"microbundle --jsx React.createElement","test":"echo \"Error: no test specified\" && exit 0","lint":"eslint \"{**/*,*}.{js,ts,jsx,tsx}\"","lint:fix":"npm run lint -- --fix","prettier":"prettier --write \"{src,tests,example/src}/**/*.{js,ts,jsx,tsx}\"","prepare":"npm run build","prepublishOnly":"npm test && npm run prettier && npm run lint"},"keywords":["react","modal","provider"],"author":{"name":"Ramil Bariev","url":"339rama"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/339rama/react-modal-system.git"},"devDependencies":{"@types/react":"^17.0.52","@typescript-eslint/eslint-plugin":"^5.48.1","@typescript-eslint/parser":"^5.48.1","eslint":"^8.31.0","eslint-config-prettier":"^8.6.0","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.0","eslint-plugin-react-hooks":"^4.6.0","microbundle":"^0.15.1","prettier":"^2.8.2","react":"^17.0.2","react-dom":"^17.0.2","typescript":"^4.9.4"},"peerDependencies":{"react":">=17"},"type":"module","source":"src/index.ts","main":"dist/index.cjs","module":"dist/index.js","exports":{"types":"./dist/index.d.ts","require":"./dist/index.js","default":"./dist/index.modern.mjs"},"types":"dist/index.d.ts","dependencies":{"react-uuid":"^2.0.0"},"gitHead":"830bf758381d11abb0be0c02c9cc8f188e709cae","bugs":{"url":"https://github.com/339rama/react-modal-system/issues"},"homepage":"https://github.com/339rama/react-modal-system#readme","_id":"@339rama/react-modal-system@1.0.0","_nodeVersion":"14.21.2","_npmVersion":"6.14.17","dist":{"integrity":"sha512-yrDcAUqTjkgyoQ4fgZxQviSYjYu41PLVMaEa0LwScKPCB+6hwySjTCX1y+OIqw5iqGIOl/eOdBlKWjYSu7oKUA==","shasum":"bc3499f714b9b1d6f48be5151156f148dfca1d52","tarball":"https://registry.npmjs.org/@339rama/react-modal-system/-/react-modal-system-1.0.0.tgz","fileCount":25,"unpackedSize":28848,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGikYJ+4I3ZcOZ5LfFBvlNsVokYjaGdnkFPLrF1rSXWaAiAIFiUUIfYDy3TNkBJHShDQVGiNHk+4nRE7FLLxesnmsw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwWFmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcrw/8DLGWoUUkaEkIQNcyez2WnbFIY2ZVA/vvuutT5cfZ62H8o/nt\r\nudSSoxLRLtaD+OSoiJTdxdugYTInZWFwDE/xwSIG34K65gdU45vqY+ewbCDU\r\nOKJ06yg/RXrzPM+xNpi6wpW+Su8bQ7nZBmncl9MF4nBYx6gBefiwbPpXa+dO\r\n0r4+THZtmWKwbOJRdZKxIG7fILxdQI4cvvUfqjlxjpDx1Zt43osWxMivE3X5\r\nnc5eyORKEU6+qe7xDwmY5Pd4bxg7MVZlvrpoQND9TTZxAdsoX72sa5/Vh5Zv\r\nlZVf6GhsL6aBS+UMs1o0u44iz0ALC1DPnCCr8fLg782lNLbiMUA2U8wZageA\r\nJ5H9z8KahQbKTxCu1nmqehWp3ORvAO3khXO10RGWSAcsBnEeGhKPGqTnEZYA\r\nsf0MuWjIsA4vcP4m0pOrYmiST1vbE7jfJalID3f0jfqaE7Kl5QcEfY4v3Dld\r\nwqNQnYRoen3Gcl+nTqc+YoRwivoNAgzzdeVlxm64u7OjAL5J+dtaoORKraex\r\nFKTeVGJdSdWns8bjYZaLATuTnlmdrf2SkSufrYBmLoXja70a4W5kQw3jozMb\r\niw8DrPufitHADHV0V0/ddMAfWa1F+9f9ThLOULnO9Ai3NEhRsg+214p2T/FS\r\nRRc0OHrYXwvPkbzEgUfP985rnXb/IPUYlrI=\r\n=9ECE\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"339rama","email":"kojzgcfrainbow@gmail.com"},"directories":{},"maintainers":[{"name":"339rama","email":"kojzgcfrainbow@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-modal-system_1.0.0_1673617766516_0.3578367687152315"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-13T13:49:26.437Z","1.0.0":"2023-01-13T13:49:26.693Z","modified":"2023-01-13T13:49:26.839Z"},"maintainers":[{"name":"339rama","email":"kojzgcfrainbow@gmail.com"}],"description":"Simple modal provider for react app","homepage":"https://github.com/339rama/react-modal-system#readme","keywords":["react","modal","provider"],"repository":{"type":"git","url":"git+https://github.com/339rama/react-modal-system.git"},"author":{"name":"Ramil Bariev","url":"339rama"},"bugs":{"url":"https://github.com/339rama/react-modal-system/issues"},"license":"MIT","readme":"# Simple modal system for react app\n\n## Installation\n\n```\nnpm install @339rama/react-modal-system\n```\n\n## Usage\n\n```ts\nimport * as React from 'react'\nimport { ModalProvider, ModalRoot, useModal } from '@339rama/react-modal-system'\n\nconst AppModalOverlay = (props: { children: React.ReactNode }) => {\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        width: '100vw',\n        height: '100vh',\n        backgroundColor: 'rgba(0,0,0, 0.3)',\n      }}\n    >\n      <div\n        style={{\n          position: 'relative',\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nconst ConfirmAlert = (props: { onClose: () => void; onConfirm: () => void }) => {\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        width: '350px',\n        padding: '8px 16px',\n        borderRadius: '8px',\n        backgroundColor: 'red',\n        color: 'white',\n      }}\n    >\n      <h1>Confirm delete</h1>\n      <div>\n        <button onClick={props.onClose}>Cancel</button>\n        <button onClick={props.onConfirm}>Confirm</button>\n      </div>\n    </div>\n  )\n}\n\nconst DeleteModal = (props: { onClose: () => void }) => {\n  const { push } = useModal()\n  const onDelete = React.useCallback(() => {\n    push(({ onClose }) => (\n      <ConfirmAlert\n        onConfirm={() => {\n          onClose()\n          props.onClose()\n        }}\n        onClose={onClose}\n      />\n    ))\n  }, [])\n  return (\n    <div\n      style={{\n        position: 'absolute',\n        width: '350px',\n        padding: '8px 16px',\n        borderRadius: '8px',\n        backgroundColor: 'purple',\n        color: 'white',\n      }}\n    >\n      <h1>Delete some item</h1>\n      <div>\n        <button onClick={props.onClose}>Close</button>\n        <button onClick={onDelete}>Delete</button>\n      </div>\n    </div>\n  )\n}\n\nconst AppPage = () => {\n  const { push } = useModal()\n  const addModal = React.useCallback(() => {\n    push(DeleteModal)\n  }, [push])\n  return (\n    <div>\n      <div>\n        <button onClick={addModal}>Add</button>\n      </div>\n      <ModalRoot>\n        {(modals) => {\n          if (!modals.length) {\n            return null\n          }\n          return (\n            <AppModalOverlay>\n              {modals.map(([modalId, { place, content: Content, close }]) => {\n                if (typeof Content === 'function') {\n                  return <Content onClose={close} key={modalId} />\n                }\n                return Content\n              })}\n            </AppModalOverlay>\n          )\n        }}\n      </ModalRoot>\n    </div>\n  )\n}\n\nexport default function App() {\n  return (\n    <ModalProvider>\n      <AppPage />\n    </ModalProvider>\n  )\n}\n```\n","readmeFilename":"README.md"}