{"_id":"@chakra-xui/portal","_rev":"1-8a56dcdee3600f893365176ba05c559a","name":"@chakra-xui/portal","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@chakra-xui/portal","version":"1.0.2","description":"React component used to render children outside the DOM hierarchy of the parent component","keywords":["react","portal","nested portal","z-index","layer","chakra xui"],"sideEffects":false,"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"homepage":"https://github.com/chakra-xui/chakra-xui#readme","license":"MIT","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/types/index.d.ts","typings":"dist/types/index.d.ts","exports":{".":{"require":"./dist/cjs/index.js","default":"./dist/esm/index.js"}},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"scripts":{"prebuild":"rimraf dist","start":"nodemon --watch src --exec yarn build -e ts,tsx","build":"concurrently yarn:build:*","test":"jest --env=jsdom --passWithNoTests","lint":"concurrently yarn:lint:*","version":"yarn build","build:esm":"cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx -d dist/esm --source-maps","build:cjs":"cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx -d dist/cjs --source-maps","build:types":"tsc --emitDeclarationOnly --declaration --declarationDir dist/types","test:cov":"yarn test --coverage","lint:src":"eslint src --ext .ts,.tsx --config ../../.eslintrc","lint:types":"tsc --noEmit"},"dependencies":{"@chakra-xui/hooks":"1.0.2","@chakra-xui/utils":"1.0.2"},"peerDependencies":{"react":"16.x || 17.x","react-dom":"16.x || 17.x"},"devDependencies":{"react":"^17.0.1","react-dom":"^17.0.1"},"_id":"@chakra-xui/portal@1.0.2","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-zKcDpRjfcwxJrFjOB8gNy7Bdga2oIw33IcHRo9nVB2Hc9rYlViXtBYGjw5Uk/+byNKXFdT5+eWHILm6ybZ57bQ==","shasum":"98dec4f30657294feaf03e41ccc0585abbb88e34","tarball":"https://registry.npmjs.org/@chakra-xui/portal/-/portal-1.0.2.tgz","fileCount":23,"unpackedSize":51711,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5JbcCRA9TVsSAnZWagAAXgEP/A3MtW160P8RszQJIWxA\nu8ojuebFPGG51XND4Pb0JZSHvuu5aFDTYYIGrqx2mnVpsNWyROc0ivrnQBf8\ngtir9ngukksZaAPoKcW6uWSz+A5wZtwO7fuf84zPAbm9ctOgz0AKCCxFeGdm\n6zhYpBlnXYDkTYqR/65i08vaewlI4oLLfV8cuYmoy76e/zx2ESJoVOPuv4Tc\ndg8aqIJ6tD5Asmt/fk1iY+IWn8Cw7Bx5QrtFRG1ICPcMXEb7nKHdpH7hT8Ls\n3MytIkhYglZdYBKl+s7a63yZpM492Bt4BjIcV2TGswfR03+1PXnFhaH1iCcJ\n6pQ9ACtNrFr1YJR24+p/dJfn1RkKrpLi93BiuRO3QY15LIM5PqSVbf4MnW2i\nidAjxyYjEyZ/heqEPxhnVyNTbgu2YzLpg3k0Rx81qpua+DuRgQ+G+K5VKXjO\n1sIgFFmBqFexXUNKTvg6CfvcD4bsszyI7CVtfD/WllFrgBbejFuGXiuoBCOf\na9A7mcZK8LrjDV6RBx6CnH18CJIOXCLYicu2ShlWyKA+0lRy72SkH8EDP30i\nwITwXFlamwAOn4PunG3WA1jUz4a844HpF3kUsM+Pka0z1bTa7nxol/2wVx2/\nbt6y8123vTVVMQMwh+T/70vnwsRyxPaouaW9CCrSuCcnp8DhI5ElI8/dcPHm\nkGpJ\r\n=f9Wv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzf9w6L2/jdLc6hxcgH3QL05KTbwQ+BojVo8XekC9jxQIhALWsNtyrzAlqzoEP6/6hZfn92xIeKjnO5QfnXZ+o0h5d"}]},"_npmUser":{"name":"meabed","email":"mo.meabed@gmail.com"},"directories":{},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/portal_1.0.2_1608816347899_0.8967539648595586"},"_hasShrinkwrap":false}},"time":{"created":"2020-12-24T13:25:47.383Z","1.0.2":"2020-12-24T13:25:48.013Z","modified":"2022-04-04T22:29:08.640Z"},"maintainers":[{"name":"meabed","email":"mo.meabed@gmail.com"}],"description":"React component used to render children outside the DOM hierarchy of the parent component","homepage":"https://github.com/chakra-xui/chakra-xui#readme","keywords":["react","portal","nested portal","z-index","layer","chakra xui"],"repository":{"type":"git","url":"git+https://github.com/chakra-xui/chakra-xui.git"},"author":{"name":"Segun Adebayo","email":"sage@adebayosegun.com"},"bugs":{"url":"https://github.com/chakra-xui/chakra-xui/issues"},"license":"MIT","readme":"# @chakra-xui/portal\n\nA wrapper for rendering components in React Portals, with support for nested\nportals and stacking. No need to use `z-index` at all with this portal, that's\nright!\n\n## Installation\n\n```sh\nyarn add @chakra-xui/portal\n\n# or\n\nnpm i @chakra-xui/portal\n```\n\n## Import components\n\n```jsx\nimport { Portal, PortalManager } from \"@chakra-xui/portal\"\n```\n\nRender the `PortalManager` once at the root of your application\n\n```jsx\nfunction App() {\n  return (\n    <ThemeProvider>\n      <CSSReset />\n      <PortalManager>{/* Your app goes here  */}</PortalManager>\n    </ThemeProvider>\n  )\n}\n```\n\n### Basic usage\n\nPortals are render into the portal manager's node by default not\n`document.body`.\n\n> It'll only render into `document.body` if you don't include `PortalManager`.\n\n```jsx\n<div>\n  <p>Welcome</p>\n  <Portal>This text has been portaled</Portal>\n</div>\n```\n\n### Nested portals\n\nNesting portal can be very useful to build complex widgets like nested menu,\npopovers, modal, etc.\n\n```jsx\n<Portal>\n  This is a portal.\n  <Portal>This is a nested portal</Portal>\n</Portal>\n```\n\n### Custom container\n\nYou can also portal elements into a custom containers. Simply pass a `container`\nprop that points to the `node` of that element.\n\n```jsx\n<>\n  <div data-testid=\"container\" ref={ref} />\n  <Portal container={() => ref.current}>\n    <h1 data-testid=\"heading\">Hello world</h1>\n  </Portal>\n</>\n```\n","readmeFilename":"README.md"}