{"_id":"@bit-about/native-portal","name":"@bit-about/native-portal","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@bit-about/native-portal","description":"Powerfull extensible pipe architecture.","author":{"name":"Gareneye"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/bit-about/native-portal.git"},"version":"1.0.0","type":"module","main":"dist/index.cjs.js","module":"dist/index.es.js","types":"dist/index.d.ts","source":"src/index.ts","exports":{".":{"require":"./dist/index.cjs.js","import":"./dist/index.es.js"}},"sideEffects":false,"peerDependencies":{"react":">=16.0.0","react-native":">=0.68.0","scheduler":">=0.19.0"},"jest":{"preset":"react-native"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","test":"jest","test:watch":"jest --watch","lint":"eslint --fix src/**","format":"prettier src/** --write"},"dependencies":{"@bit-about/context":"^1.0.3"},"devDependencies":{"@babel/core":"^7.21.0","@babel/preset-env":"^7.20.2","@babel/preset-typescript":"^7.21.0","@testing-library/jest-native":"^5.4.2","@testing-library/react-native":"^11.5.4","@types/jest":"^29.4.0","@types/node":"^18.15.0","@types/react":"^18.0.28","@types/react-dom":"^18.0.11","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.54.1","@typescript-eslint/parser":"^5.54.1","@vitejs/plugin-react":"^3.1.0","babel-jest":"^29.5.0","eslint":"^8.35.0","eslint-config-prettier":"^8.7.0","eslint-plugin-react":"^7.32.2","jest":"^29.5.0","jsdom":"^21.1.0","metro-react-native-babel-preset":"^0.76.0","npm-run-all":"^4.1.5","prettier":"^2.8.4","rollup-plugin-typescript2":"^0.34.1","tslib":"^2.5.0","typescript":"^4.9.5","vite":"^4.1.4","vite-plugin-dts":"^2.1.0","vite-plugin-eslint":"^1.8.1"},"gitHead":"8484df100c042dc61c6ac9e386ba8b3e1644a1ba","bugs":{"url":"https://github.com/bit-about/native-portal/issues"},"homepage":"https://github.com/bit-about/native-portal#readme","_id":"@bit-about/native-portal@1.0.0","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-luT0cECi/1gQSC96rQF+VZsDk60eVJBmVmGR7pjCg3K1sUt50HUAVHZwRbG/oj/Arv/maGEXUCAa483LYU+iRw==","shasum":"3411a1f3980b0444da7561d71295f79dd8a63173","tarball":"https://registry.npmjs.org/@bit-about/native-portal/-/native-portal-1.0.0.tgz","fileCount":9,"unpackedSize":115401,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC97Plqs3AwWR+BdV4cy02RTenIgvPytVxgzBG04jA9cwIgbek7ruVz5DBx5grXh7s+iEuMvErxstMn5kwRXA2JS20="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDLJoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqajBAAnwD7L9Ni5Lh1IpRD8BFOFj3CW4XeGNiGTgUCgQaAKeKwOR3v\r\nLI/35jQxB3cQw4MGAUjOyf0HchbjirkI6WDZL5cHCfWrEdIUanILhDl6iw7z\r\nC2mWyB2Hr7/PI2vqspXb35MI7MQUUlFCZDkkrxInmvWahqKcVYB30PLgUJy1\r\nJY5kNPDEUHUEMHTyYQKp+Lrt/YTlY4u4a7nLqdZPIXvLqxw+spOV40S1fB+9\r\nsYTEjYW3MP8xx/Dns3mY6kxYaX+ql5G417k+rlw6DwmcPz6/YVoK60su1heC\r\nxKf8085U1yZneFcC6J/IOKswJc9KXswHEJzdPoLWHGE+zyhnYJ0IpI4rf6jI\r\nyRuxvLRnC3mJzbI+7l/Ykr7lJHu2l0S2eNv6bBW2KqocQYpKfgimKwdC6K7y\r\nnrIIyYUYSKTN+94nSaGaY24q2YeDnMU2t0Pi9rQLXLwDzMPkOxitFHe5hxTc\r\nFmqV4B9E5YwZ1Ew/8S4hhdrkb5WfMd9hkJxwgPHi6+IR3Cpd1BCVgMooDVTs\r\nTeO6FOqkk76wmPDtqIBPoo5ADDcaRqwkB1AYLRJdheXDy8YFLDrvekV1ihJ4\r\nCmuvrrh9XYBD7FxZ8wRrAQlutVsCOiw+RTM+AF/YamVjXIeX57z1rKT4AO4c\r\nPvOS6cnIn/jWx6QpS0brrOPlP8tJ35nZOFE=\r\n=uQTv\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"pannoire","email":"maciekolej@gmail.com"},"directories":{},"maintainers":[{"name":"pannoire","email":"maciekolej@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/native-portal_1.0.0_1678553704016_0.21239778411220067"},"_hasShrinkwrap":false}},"time":{"created":"2023-03-11T16:55:03.953Z","1.0.0":"2023-03-11T16:55:04.201Z","modified":"2023-03-11T16:55:04.421Z"},"maintainers":[{"name":"pannoire","email":"maciekolej@gmail.com"}],"description":"Powerfull extensible pipe architecture.","homepage":"https://github.com/bit-about/native-portal#readme","repository":{"type":"git","url":"git+https://github.com/bit-about/native-portal.git"},"author":{"name":"Gareneye"},"bugs":{"url":"https://github.com/bit-about/native-portal/issues"},"license":"MIT","readme":"\r\n<p align=\"center\" style=\"font-weight: bold; font-size: 1.5em\">@bit-about/native-portal</p>\r\n<p align=\"center\">\r\n<a href=\"https://www.npmjs.com/package/@bit-about/native-portal\"><img alt=\"\" src=\"https://img.shields.io/npm/v/@bit-about/native-portal.svg\" /></a>\r\n<a href=\"https://bundlephobia.com/package/@bit-about/native-portal\"><img alt=\"Bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@bit-about/native-portal?label=size\" /></a>\r\n<a href=\"https://codecov.io/gh/bit-about/native-portal\"><img alt=\"\" src=\"https://img.shields.io/codecov/c/github/bit-about/native-portals?token=BuGi92VqnL\" /></a>\r\n</p>\r\n\r\n## Install\r\n\r\n```bash\r\nnpm i @bit-about/native-portal\r\n```\r\n\r\n## Features\r\n\r\n- 100% **Idiomatic React** and 100% Typescript\r\n- Tiny & Efficient\r\n- Does not trigger unnecessary renderings\r\n- **Just works** ™\r\n\r\n## Usage\r\n\r\n```tsx\r\nimport { portal } from '@bit-about/native-portal'\r\n\r\n// 1️⃣ Create a portal\r\nconst Portal = portal()\r\n\r\n// 2️⃣ Wrap your app with Provider\r\nconst App = () => (\r\n  <Portal.Provider>\r\n    {/* ... */}\r\n  </Portal.Provider>\r\n)\r\n\r\n```\r\n\r\n\r\n⬜ Set injection target\r\n```tsx\r\nconst ComponentA = () => (\r\n  <>\r\n    <Portal.Target />\r\n  </>\r\n)\r\n```\r\n\r\n\r\n🌀 ...then inject content from elsewhere\r\n```tsx\r\nconst ComponentB = () => (\r\n  <>\r\n    <Portal.Injector>\r\n      <Text>Hello!</Text>\r\n    </Portal.Injector>\r\n  </>\r\n)\r\n```\r\n\r\nThanks to this, \r\nwhen the `ComponentB` is rendered, \r\nthe `Hello!` sentence will be moved to the `ComponentA`.\r\n\r\n## Many portals under one provider\r\n```tsx\r\nimport { portal } from '@bit-about/native-portal'\r\n\r\n// Declare destinations during portal creation\r\nconst Portal = portal('toHeader', 'toMenu', 'toHeaven')\r\n```\r\n\r\n⬜ Set injection target using `name` prop\r\n```tsx\r\nconst Menu = () => (\r\n  <>\r\n    <Portal.Target name=\"toMenu\" />\r\n  </>\r\n)\r\n```\r\n\r\n\r\n🌀 ...then inject content using `name` prop\r\n```tsx\r\nconst Screen = () => (\r\n    <>\r\n      <Portal.Injector name=\"toMenu\">\r\n        <Text>{'New menu option'}</Text>\r\n      </Portal.Injector>\r\n    </>\r\n  )\r\n```\r\n\r\n\r\n## Default content\r\nTo declare fallback content for portal that is not in use, you can just pass `children` prop to `Target` component.\r\n\r\n```tsx\r\n<Portal.Target>\r\n  <Text>{'I am only visible when no content has been injected.'}</Text>\r\n</Portal.Target>\r\n```\r\n\r\n## Don't you like the default names?\r\n```tsx\r\nimport { portal } from '@bit-about/native-portal'\r\n\r\nconst {\r\n  Provider: MyAmazingProvider,\r\n  Target: MyAmazingTarget,\r\n  Injector: MyAmazingInjector,\r\n} = portal()\r\n\r\n// ... and then\r\n\r\nconst App = () => (\r\n  <MyAmazingProvider>\r\n    {/* ... */}\r\n  </MyAmazingProvider>\r\n)\r\n```\r\n\r\n## Common Questions\r\n##### ► What happens if I use multiple `Injectors` for one portal at the same time?\r\nIt works like a stack. The `Target` will render the latest content. <br/>If the newest `Injector` is unmounted, the `Target` will render the previous one.\r\n\r\n##### ► What happens if I use multiple `Targets` for one portal at the same time?\r\nEach `Target` will display the same content.\r\n\r\n##### ► Do I need to render `Target` before the `Injectors`?\r\nNope! <br/>\r\nWhen you render `Target` it will be automatically filled up by the injected content.\r\n\r\n##### ► Is this efficient? What about the re-renders?\r\nYes. <br/>\r\nMoreover, `Providers` and `Injectors` will be never unecessary re-rendered.<br/>\r\n`Target` rerender only when the latest injected content changes.\r\n\r\n## Partners  \r\n<a href=\"https://www.wayfdigital.com/\"><img alt=\"wayfdigital.com\" width=\"100\" height=\"100\" src=\"https://user-images.githubusercontent.com/1496580/161037415-0503f763-a60b-4d40-af9f-95d1304fa486.png\"/></a>\r\n\r\n## Credits\r\n- [use-context-selector](https://github.com/dai-shi/use-context-selector) & [FluentUI](https://github.com/microsoft/fluentui) - fancy re-render avoiding tricks and code main inspiration\r\n\r\n## License\r\nMIT © [Maciej Olejnik 🇵🇱](https://github.com/macoley)\r\n\r\n## Support me \r\n\r\n<a href=\"https://github.com/sponsors/macoley\"><img alt=\"Support me!\" src=\"https://img.shields.io/badge/github.com-Support%20me!-green\"/></a>\r\n\r\nIf you use my library and you like it...<br />\r\nit would be nice if you put the name `BitAboutNativePortal` in the work experience section of your resume.<br />\r\nThanks 🙇🏻! \r\n\r\n\r\n---\r\n<p align=\"center\">🇺🇦 Slava Ukraini</p>\r\n","readmeFilename":"README.md"}