{"_id":"@abdulghani/react-promise-modal","_rev":"4-a79d03492ebaaf3290af7dcc6b045d3f","name":"@abdulghani/react-promise-modal","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@abdulghani/react-promise-modal","version":"1.0.0","description":"function to create function based modal to render custom react component independently","main":"./build/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel ./src --out-dir ./build"},"keywords":[],"author":{"name":"Abdul Ghani","url":"http://abdul-ghani.com/"},"license":"ISC","peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","babel-preset-minify":"^0.5.1"},"_id":"@abdulghani/react-promise-modal@1.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-zksrlivoq2srAFEsrdZpINzvGeMDvA6G8Ec5J8iI1vi0Su+ot3L+vL4p5gLfGGsyh0l/8KNGKdmP5cdywWjy4Q==","shasum":"7b4187edac47e39dd053065b862d2df2569a495c","tarball":"https://registry.npmjs.org/@abdulghani/react-promise-modal/-/react-promise-modal-1.0.0.tgz","fileCount":2,"unpackedSize":1673,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMmBBCRA9TVsSAnZWagAA5+IQAI1xg2m80IJ8+kzOjLrn\nR+4kUi31m/c5K/zY8GAYhirQ4PC/sOnsqgr7IThZ2eEjd1elRJyg5yuS+yfP\nqjZRn9nhK3wrtcmYsRCa/TayOSfkWhg95zOilUdyh0rWTzRhguQAbxm0xU6R\nc7xZ6HgbHTi2QoCp9yZ8tyEh1oI7WUZZ5BfchP1I5djsLIACsYYVMKGge1s5\nTFAmYnFpFQjFF2aD21pAWAwfkwDt1dQsaewLeXlkIfhQedEqgncf4vnVOxXk\nDrN2Hx3pWRcgZ0sf1qtbInb6H9YzTuCDHR0twmsa5cKnoJ2hwG7YkmyC+gQV\ntrlu9nzk4vHuUBS84cZ2U8CQYfS/Hc4u3hmXebD9PKXboZpgIFfcW9YQd80O\nYbXnifxhnvqL03Dk2E4bBHecHb60PWEflelDApBzpkb3KxvgCG41Ja3kdXks\nWI5svTxn3pNZLAfEkS4S1I5sVVtNzwQ96meziyTtWAg39YRgq1eP1ZJIpY9t\nJwDsfiW/kmVkXyRWNzjTb7JZ/ykesTfvkcqBkATdD7k2mZ8no2bx63++7ie4\ngny5gVThe/uQhaMEtab7UxXUO74eP7sDf5GkUtcMkUYbBBqaPyUPSZr9OsmY\n3Hj3WAQglKLjQVbjDFbRNJl+oYB1CENwZgKT9eZe0mln9eqU8QmtJyqO0MVT\n3duH\r\n=2/Cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKhKGBcgC+t8bMYGnU+WEsfLnJNZx2lUBT1GnVE9qKNAiEA7rmHNvFpFIPNLyIjD1kUSAF1hxyu4TVTmzcR2HPoDaw="}]},"maintainers":[{"name":"abdulghani","email":"contact.abdulghani@gmail.com"}],"_npmUser":{"name":"abdulghani","email":"contact.abdulghani@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-modal_1.0.0_1580359745009_0.19076575975010424"},"_hasShrinkwrap":false},"1.0.1":{"name":"@abdulghani/react-promise-modal","version":"1.0.1","description":"function to create function based modal to render custom react component independently","main":"./build/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel ./src --out-dir ./build"},"keywords":[],"author":{"name":"Abdul Ghani","url":"http://abdul-ghani.com/"},"license":"ISC","peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","babel-preset-minify":"^0.5.1"},"_id":"@abdulghani/react-promise-modal@1.0.1","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-0DhZMZXsoOQMX2F0wBWXZDACSX8PQmdOomF4z/Y5aH9q65R0rIiqspGOvn6Si1Zs81BxuL7Q06NKMdQ3QdE8rw==","shasum":"0210d6cf3e7e6c103f218a441fa34566bcfd993f","tarball":"https://registry.npmjs.org/@abdulghani/react-promise-modal/-/react-promise-modal-1.0.1.tgz","fileCount":3,"unpackedSize":3479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMmRDCRA9TVsSAnZWagAAjGQP/38lbO6kMvV0y8XvlCvc\nL5yH4mu3cCKNTMyeEYn9om1jESnz5ZUNQdUPqTlIYjsTKwM/jgjy4eOW121X\nrT3/KvvaotSMiNlw4CVsrC5c3C2mQhUzThnqKSTko14OFYs9F6ckix8oVzIi\n2v0VZzes0jTBgW015qvb4Bzkfn+uclw3g+rC3qWP7shj3CIb3cw9770Qf2hH\nkd8yNf/8QwvlTku5OtfTpO1n7Y1ivYNl0XZeGSGyA46T7/iLSpN1H+WogAUU\nOcN7Az289PhVhtJ+YapEkFvPM491SAuDOiJze8J/N3j9QeJ1ZYpFpY84Hk7r\nHnX93PeeD/qZ99QTDlkRZPtxTuc4r5cxTTViqnYgikCOdFdc1T4BiYZ+7X7u\nYpdZNZd1oN6rZOTVrFQqgh12qX+aJ4mFSuS90cDvlMPCei5VAS2FRNxmxtl/\n6JPIYd0nrH7bpCFiNDxZYxndUy3ZvZHz/jNLwclQw2KQfWydyB8QnTw4D/bX\nv/6zfmLRwGfBw4uCf0OToasmv8a/CooIbEfzRI1rYgnRM+J9mKzWixqx63Z5\nicSO1xKHpu5PasGg8okeohLVeMltTO2WISH86JypWI1+Yj6T+iGdLsF5Sbd4\n2kpOso+oUhuvzDRGqbX0za3BBIEYgMTAtHYzv0kC/lbbzrPTzzlQ/u0O32b2\nOFzm\r\n=VZ5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjyt7E3lovf2goTlFYa7tRuy8eOkeohzyYWQBOOfEY7AiByW/WSwFGwAFgfn2DJid+pMX80JrHmbZ3QxjsV1iLBFw=="}]},"maintainers":[{"name":"abdulghani","email":"contact.abdulghani@gmail.com"}],"_npmUser":{"name":"abdulghani","email":"contact.abdulghani@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-modal_1.0.1_1580360771293_0.6623393613215551"},"_hasShrinkwrap":false},"1.0.2":{"name":"@abdulghani/react-promise-modal","version":"1.0.2","description":"function to create function based modal to render custom react component independently","main":"./build/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel ./src --out-dir ./build"},"keywords":[],"author":{"name":"Abdul Ghani","url":"http://abdul-ghani.com/"},"license":"ISC","peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","babel-preset-minify":"^0.5.1"},"_id":"@abdulghani/react-promise-modal@1.0.2","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-gCdNGMX7W13FJOFHnMhDx1a1FwjkLzWoyXW+rTZQEVTBYXVW1o5nlKl0ys9zcdQGERdCeejvV4b0vUNDrF3d1w==","shasum":"11a424ddc1090ebbced3b74ceb8544ef090fd636","tarball":"https://registry.npmjs.org/@abdulghani/react-promise-modal/-/react-promise-modal-1.0.2.tgz","fileCount":3,"unpackedSize":3505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMmxyCRA9TVsSAnZWagAAptgP/0tX6nQkCBKDT7T0K261\n6dNO8f4o8qvmQ0s2LH3Lr0pjiRBKYBpuqWIgP76f6g9NHnIIP+EfwVkDLw5Y\nVgcrZ2aXE3okt1DEHUXUvaSvpanUapfMw9dB11+HBPnIx86AByI8KeivTL+z\nygrQZxKzw+uvIitcPxoISjU5UCByZrNQarft3M0uQSdqUWD5HC30oxblAZyL\nTjP2MrHjjja9bONc4g1r7TY5jIgEbayJkz1XmFmlD30Df8DiIz76Txs9e3ZP\nz1xQQ5r1LU2+zAVsF4KccX5hpM1fbnqzeR1ZtW3RZ4eL5uruPzd8ca2HI4ig\nZl3fmehHKYYBH7dQJ3FoHfpBuenL8e99gYerfEEV2quO/7WyRNTMkFuTqjG4\nX/ppepgdiSJB9r7Wk6uj1l1ecxKDjuUrURj6oR44MxsMSX0XyTL5FweiMUPv\n+hsnWKv3PwpWM3menWHIelio/A5Ta9OD1ktzgcdRO0eaUBCHxT1zFmBV1X/c\nKlRp06CBg8Yap5uXo3O8zez8V1MwSlYnOeR+oMqltdiLw7xcVauqFm6B+saV\nMRwxs1OsfykC0GN2oU8sArCOrhf2f3vJvFKciIJbJysIutvLQWQOChPoHLrW\nk/qiGUYDxAdHHf5LnBTjGVTxsLDop2p4nmKb4ZB/vioIeEomdjUhIy1Wjlpd\nAhYM\r\n=EqmN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvbA7TVx7QjhLn5niWSTVDlajXdGYd+aK9/DJHyj3dNwIgZIkWP/LjCMLalRX9YnoUUqvJ9y1hRGqer9mKEEgGQfc="}]},"maintainers":[{"name":"abdulghani","email":"contact.abdulghani@gmail.com"}],"_npmUser":{"name":"abdulghani","email":"contact.abdulghani@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-modal_1.0.2_1580362865720_0.6937873582567646"},"_hasShrinkwrap":false},"1.0.3":{"name":"@abdulghani/react-promise-modal","version":"1.0.3","description":"function to create function based modal to render custom react component independently","main":"./build/index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"babel ./src --out-dir ./build"},"keywords":[],"author":{"name":"Abdul Ghani","url":"http://abdul-ghani.com/"},"license":"ISC","peerDependencies":{"react":"*","react-dom":"*"},"devDependencies":{"@babel/cli":"^7.8.3","@babel/core":"^7.8.3","@babel/preset-env":"^7.8.3","@babel/preset-react":"^7.8.3","babel-preset-minify":"^0.5.1"},"_id":"@abdulghani/react-promise-modal@1.0.3","_nodeVersion":"10.17.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-uU1QD9JFD4S/T3JtWV2+ZmmQp30z42H73KnYVLofStKg9lXArgel7MsXbKuJBIIRQTRgrdI3MBQXk+/6a1xifA==","shasum":"b6d082dd3ffba508e12a53821569b745e2075204","tarball":"https://registry.npmjs.org/@abdulghani/react-promise-modal/-/react-promise-modal-1.0.3.tgz","fileCount":3,"unpackedSize":3810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMqsuCRA9TVsSAnZWagAA23MP/jhtP3JyBcR9GAK1EuzJ\nER0UGpR7x2C5bFGeE5I+InJq6u9nGsKTQO1mQfi/uyEzjdzPV85te+/ORQ/n\nXKC0gIPd2IjL7eDWD3Z6S8zOyDswwup2HtMggYbqylpYqyXUlizInHBESbKh\n3LmbCkbbQjChgAZ4MxCVYlJ/DROC4NmUMgODCFJFAcZUIECCxKKLrJ/EaXok\n6GOJoqed5zpz6BfCbiLL2LrgCQD28dWoQZQf7U0WaPN4tSLTBkSqH3DNvBBv\nX01JqP9RlsmW1WUF71FE/5qc34KpO9WeLZyIPUs3NCIvDKcelbkP23F/HERn\nZRyw+fF4k959NRqBTlt+ZAVecgeNqTY7yQ5hEkdXBHqvG1sLr7RMGUI45VQP\n2MQiloWtG2WiICHp8zuh2g6y1rIhODd2B/tx4PbEo0cDvRUcDIIN+NUc6reo\nmQ/fsLqHX2+2TpGZ/HauADQA4703nLDq2yZlW5ijN2xrS8/n9Mc/q0gKUa7G\nzscCQkWtSPQvXcfbJyeblqMRwprdxmlpQXzz096KCP7cMoWfojuTaqlgtBqP\nAG4FheuJRRvDSTEMdRVrmLy9+IxYdexVpBdY82RWx3spAmVvHD86KtxC2X01\ntY9hZBHTdserpC3MRnWar1l6lQL3Uodk/6xq/qS6441sIpVdTe0jMLg5wEZl\nsR0X\r\n=yDJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBGPxKtI8Ojl6EoBwMmSeFtzU3Q0sx3xeyWOUt1g0MHAiEAnMzTQiTWgxClRV7lwq84rfmXUdCptAg3PkP4Qgo1x3Y="}]},"maintainers":[{"name":"abdulghani","email":"contact.abdulghani@gmail.com"}],"_npmUser":{"name":"abdulghani","email":"contact.abdulghani@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-promise-modal_1.0.3_1580378925814_0.7285361587453592"},"_hasShrinkwrap":false}},"time":{"created":"2020-01-30T04:49:04.930Z","1.0.0":"2020-01-30T04:49:05.100Z","modified":"2022-04-04T10:58:35.754Z","1.0.1":"2020-01-30T05:06:11.393Z","1.0.2":"2020-01-30T05:41:05.855Z","1.0.3":"2020-01-30T10:08:46.260Z"},"maintainers":[{"name":"abdulghani","email":"contact.abdulghani@gmail.com"}],"description":"function to create function based modal to render custom react component independently","keywords":[],"author":{"name":"Abdul Ghani","url":"http://abdul-ghani.com/"},"license":"ISC","readme":"# React Promise Modal\r\nRender your own react modal component with a function call\r\n\r\n## Installation\r\nnpm\r\n```\r\nnpm install @abdulghani/react-promise-modal\r\n```\r\n\r\nyarn\r\n```\r\nyarn add @abdulghani/react-promise-modal\r\n```\r\n\r\n## Usage\r\n```javascript\r\n  // other imports\r\n  import createPromiseModal from \"@abdulghani/react-promise-modal\";\r\n  \r\n  // plug your component to it\r\n  const showModal = createPromiseModal(MyModalComponent);\r\n\r\n  // use it in your component/app\r\n  const App = () => {\r\n    const onClick = () => {\r\n      showModal({\r\n        title: \"hello\",\r\n        body: \"world\",\r\n        onConfirm: () => yourFunction(),\r\n        // other configs\r\n      });\r\n    }\r\n\r\n    return (\r\n      <div>\r\n        <button type=\"button\" onClick={onClick}>Click Me</button>\r\n      </div>\r\n    );\r\n  }\r\n\r\n```\r\n\r\n## Setup your component\r\nYour component could take any props you want and fill the props with the `showModal(config)` `config` object.\r\nand your component going to need to call `onClose` method inside the component that's plugged to your component props to simply close the component.\r\n\r\n```javascript\r\n  // imports\r\n\r\n  const MyModalComponent = props => {\r\n    const { onClose } = props;  // plugged by the library\r\n    const { title, body, onConfirm } = props; // plugged on your call\r\n\r\n    const onOk = () => {\r\n      onConfirm();\r\n      onClose();  // also close the modal\r\n    }\r\n\r\n    return (\r\n      <div className=\"modal\">\r\n        <div className=\"modal-header\">\r\n          {title}\r\n        </div>\r\n        <div className=\"modal-body\">\r\n          {body}\r\n        </div>\r\n        <div className=\"modal-footer\">\r\n          <button className=\"red\" type=\"button\" onClick={onClose}>Cancel</button>\r\n          <button className=\"blue\" type=\"button\" onClick={onOk}>Ok</button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n```\r\n\r\n## If you have different/custom `root` node\r\nIf you have/rename different root node for your application. you could set the `createPromiseModal` to point to your node id.\r\n\r\n```javascript\r\n  const showModal = createPromiseModal(MyModalComponent, \"my-custom-root\"); // currently it takes string id\r\n```","readmeFilename":"README.md"}