{"_id":"@berish/portal","_rev":"3-0e0134db1a3338af286d1ae2c12a2fb4","name":"@berish/portal","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@berish/portal","version":"1.0.0","description":"Library for creating global DOM elements and working with them as with React components","main":"build/index.js","typings":"build/index.d.ts","repository":{"type":"git","url":"git@gitlab.com:berish/packages/berish-portal.git"},"author":{"name":"Berishev Ravil","email":"quadraticteam@gmail.com"},"license":"MIT","private":false,"keywords":["linq","berish","array","collection","helper","csharp","dotnet","tsql","native","js","ts","typescript","standart","Berishev","Ravil","Fartix","quadraticteam","jest","package"],"scripts":{"test":"jest --config jestconfig.json","test:dev":"jest --config jestconfig.json --watch --verbose=false","build":"tsc -p .","format":"prettier --write \"src/**/*.ts\" \"src/**/*.js\"","lint":"tslint -p tsconfig.json","prepare":"npm run build","prepublishOnly":"npm test && npm run lint","preversion":"npm run lint","version":"npm run format && git add -A src","postversion":"git push && git push --tags"},"devDependencies":{"@types/faker":"^4.1.5","@types/jest":"^24.0.15","@types/react":"^16.9.2","faker":"^4.1.0","jest":"^24.8.0","prettier":"^1.18.2","react":"^16.9.0","ts-jest":"^24.0.2","tslint":"^5.18.0","tslint-config-prettier":"^1.18.0","typescript":"^3.5.2"},"dependencies":{"@berish/linq":"^1.0.4","berish-guid":"^2.0.0","berish-ringle":"^2.1.0"},"peerDependencies":{"react":"^16.0.0"},"_id":"@berish/portal@1.0.0","dist":{"shasum":"05a726c22b3947b61c02c7045ce2e86aace7f9eb","integrity":"sha512-by94/rVT/DmnlqtNvUoOFH4xazlIQjCZQRImd9m8AuBY6H63tARQmA+No1C66xKEpn2uV8gbuSXxf8TmksrdPQ==","tarball":"https://registry.npmjs.org/@berish/portal/-/portal-1.0.0.tgz","fileCount":13,"unpackedSize":15574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdW8gjCRA9TVsSAnZWagAAgMgQAJGQWJGE2moTyezue33d\nA7IZLWdBmi7jnSV6T9QAKCmTe3RRyepIW9wDAzOikziqINmQGZtzYKgWQ1vw\nn6eFx1uzFnAESZue0i9QABEWmlXYuxFSkRgFpySbaebrOCaWOA5rkLhMGd3B\nAlRt3Jra14zcDQDyr+d9HanrtiliMIzI/mG4VnCXhbspViPtrvtmPq2Nb4lI\nBiVJpiEbhIghPi3NnDuiU+FOBiWg6rjPA0YOeinlz7aHSFDPypGSBmS3oC1E\nhBFxHQbg2o8df2lPRymD+0h3DF/LSl9X6nSUiamfRbOJkywIj5hfqN74QYgl\nCL4sL/kpsyzBtUzkk+SsyPvlrhm66hkLwoEZJ1n0JifvNg5cBrJRvzN8nrZx\n900qqGmmDg8cQSdCpbv1+7aOqrs3eBvOAPAupS0BxK8JFlq3ToYNZZNnUYZb\nKB3A7RWWy+JAAZE5VplV8kKmjD7/yB7jIr27CBaTSeKCzFjIJpDFucOXJHN1\nwh2bSoFWY5P4jHToT2RtJ0YpfEauVvCP/GA7wUUFn2Qq7tlxrPrdOQsIPqj9\nMb7Johm1o1sdikRtRJp/N2zNsdZkgJ+F6EyR6r5eMSB82HawiLKimlq1yN5A\nRrMczGnL2BNKJHirJFn8gz7v9r/9Fq0Xp/ptKRE2asFSk6pTCrs+sgkOGhSv\n+vXg\r\n=bKs0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdt+QuXaJguMLyvP0HKcjmrUFGhj/fqRmGhxQqUIYA9gIgKC5Qi94VxslsGF8fD5q+71y0Lux+gYJD4ge8LQ03oUc="}]},"maintainers":[{"name":"quadraticstudio","email":"quadraticteam@gmail.com"}],"_npmUser":{"name":"quadraticstudio","email":"quadraticteam@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/portal_1.0.0_1566296098666_0.2117570245911713"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-20T10:14:58.453Z","1.0.0":"2019-08-20T10:14:58.810Z","modified":"2022-04-04T18:29:05.751Z"},"maintainers":[{"email":"quadraticteam@gmail.com","name":"quadraticstudio"}],"description":"Library for creating global DOM elements and working with them as with React components","keywords":["linq","berish","array","collection","helper","csharp","dotnet","tsql","native","js","ts","typescript","standart","Berishev","Ravil","Fartix","quadraticteam","jest","package"],"repository":{"type":"git","url":"git@gitlab.com:berish/packages/berish-portal.git"},"author":{"name":"Berishev Ravil","email":"quadraticteam@gmail.com"},"license":"MIT","readme":"# @berish/portal\n\nLibrary for creating global DOM elements and working with them as with React components\n\n## Installation\n\n```\n$ npm install @berish/portal --save\n```\n\nor\n\n```\n$ yarn add @berish/portal\n```\n\n**Supports typescript**\n\n## Get started\n\nFirst you need to decide where the root of the portals will be located.\n\n```typescript\nimport { Root } from '@berish/portal';\n\nclass App extends React.Component {\n  render() {\n    return (\n      ...\n      <Root />\n      ...\n    );\n  }\n}\n```\n\nAfter that, you can render any element using the portals.\n\n```typescript\nimport { Portal } from '@berish/portal';\n\nclass TestDiv extends React.Component {\n  render() {\n    return <div>Hey bro</div>\n  }\n}\n\n...\nsomeAction() {\n   Portal.create(TestDiv)();\n}\n...\n```\n\nWith some response from portallable element\n\n```typescript\nimport { Portal } from '@berish/portal';\n\nclass TestForm extends React.Component {\n\n  resolve = () => {\n    this.props.portal.resolve({name: 'Ravil'})\n  }\n\n  reject = () => {\n    // Close form with rejected reason\n    this.props.portal.reject('My some reason')\n  }\n\n  render() {\n    return (\n      <div>\n        <h1>Hey bro, click button</h1>\n        <button onClick={this.resolve}>Resolve</button>\n        <button onClick={this.reject}>Reject</button>\n      </div>\n    );\n  }\n}\n\n...\nasync someAction() {\n  try {\n    const result = await Portal.create(TestForm)();\n    console.log(result); // { name: 'Ravil' }\n  } catch (err) {\n    console.log(err); // My some reason\n  }\n}\n...\n```\n\nExample with modals (real case): \n\n```typescript\nimport { Portal } from '@berish/portal';\nimport { Modal } from 'any-ui-kit'; // example\n\nclass TestModal extends React.Component {\n  \n  save = () => {\n    this.props.portal.resolve(this.state.someData)\n  }\n\n  cancel = () => {\n    this.props.portal.resolve();\n  }\n\n  render() {\n    return (\n      <Modal onClose={this.cancel} visible={true}>\n        <h1>Hey bro, click button</h1>\n        // {...}\n        <button onClick={this.save}>Save</button>\n        <button onClick={this.cancel}>Cancel</button>\n      </Modal>\n    );\n  }\n}\n\n...\nasync someAction() {\n  const result = await Portal.create(TestForm)();\n  console.log(result); // if clicked at Cancel button - null. \n}\n```\n\n## API\n\nRoot props:\n\n```typescript\ninterface IRootProps {\n  portalName?: string;\n  children?: React.ReactNode;\n}\n```\n\n`portalName` - It is scope of Portal (defaults `default`). Not required.\n`children` - Any content that can be rendered on top of the portal (defaults `undefined`). Not required.\n\nPortal API:\n\n```typescript\nPortal.scope(portalName?: string); // Select root by portalName\nconst destroy = Portal.add(element: JSX.Element); // You can show native JSX element. Returns destroy function; \nPortal.update(); //Re-render all portal's elements\nPortal.listen(cb: (jsxElements: JSX.Element[]) => void); // Listen for updates\nconst withPortal = Portal.create(component: React.ComponentClass | React.SFC); // HOC of portals\nconst promise = withPortal(props?: Props, elementId?: string); // Show element in Root, elementId - id for destroy this element manual;\n\nwithPortal.destroy(); // Destroy all elements, whos HOC'ed in withPortal\nwithPortal.destroy(elementId?: string); // Destroy only one element by ID;\n\npromise.elementId; // Automatic generated or manual ID for destroy. You can do withPortal.destroy(promise.elementId);\n```\n\n\n\n","readmeFilename":"README.md"}