{"_id":"@dwelle/tunnel-rat","name":"@dwelle/tunnel-rat","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@dwelle/tunnel-rat","version":"0.1.1","description":"non gratum anus rodentum","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","sideEffects":false,"scripts":{"build":"rollup -c","postbuild":"tsc --emitDeclarationOnly","prepublishOnly":"npm run build","test":"jest","ci":"yarn build && yarn test","release":"yarn ci && yarn changeset publish"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,jsx,ts,tsx}":["eslint --fix"]},"repository":{"type":"git","url":"git+https://github.com/pmndrs/tunnel-rat.git"},"keywords":["react","portal","tunnel"],"author":{"name":"Paul Henschel"},"license":"MIT","bugs":{"url":"https://github.com/pmndrs/tunnel-rat/issues"},"devDependencies":{"@babel/core":"7.16.0","@babel/plugin-proposal-class-properties":"^7.16.0","@babel/plugin-transform-modules-commonjs":"7.16.0","@babel/plugin-transform-parameters":"7.16.0","@babel/plugin-transform-runtime":"7.16.0","@babel/plugin-transform-template-literals":"7.16.0","@babel/preset-env":"7.16.0","@babel/preset-react":"7.16.0","@babel/preset-typescript":"^7.16.0","@changesets/cli":"^2.24.3","@rollup/plugin-babel":"^5.3.0","@rollup/plugin-node-resolve":"^13.0.6","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^13.3.0","@types/jest":"^27.0.2","@types/node":"^16.11.6","@types/react":"^18.0.17","@types/react-dom":"^18.0.6","@types/react-test-renderer":"^18.0.0","@typescript-eslint/eslint-plugin":"^5.3.0","@typescript-eslint/parser":"^5.3.0","eslint":"^8.1.0","eslint-config-prettier":"^8.3.0","eslint-import-resolver-alias":"^1.1.2","eslint-plugin-import":"^2.25.2","eslint-plugin-jest":"^25.2.2","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.26.1","eslint-plugin-react-hooks":"^4.2.0","husky":"^7.0.4","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","lint-staged":"^11.2.6","prettier":"^2.4.1","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^2.59.0","rollup-plugin-size-snapshot":"^0.12.0","rollup-plugin-terser":"^7.0.2","ts-jest":"^28.0.8","typescript":"^4.4.4"},"homepage":"https://github.com/pmndrs/tunnel-rat#readme","dependencies":{"zustand":"^4.3.2"},"gitHead":"84e39092d8a69a83b908acd5d2c4c6150f484877","_id":"@dwelle/tunnel-rat@0.1.1","_nodeVersion":"18.11.0","_npmVersion":"8.19.2","dist":{"integrity":"sha512-jb5/ZsT/af1J7tnbBXp7KO1xEyw61lWSDqJ+Bqdc6JlL3vbAvsifNhe+/mRFs6aSBCRaDqp5f2pJDHtA3MUZLw==","shasum":"0a0b235f8fc22ff1cf47ed102f4cc612eb51bc71","tarball":"https://registry.npmjs.org/@dwelle/tunnel-rat/-/tunnel-rat-0.1.1.tgz","fileCount":19,"unpackedSize":23805,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIED5YyUJ3V+VGOWImdJ3aSh7nc4NSxUHej5LjxasTFTPAiAr6V9vals9ZoSB5D0WUoQRE95RMhpS5Z4RmhZS1hQ2NQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2XL4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqhUg/8CivQ2W/BlhLCRwr7mxSygBZ5ILB3bfGy95O3iZdQG8YWaz5u\r\n6h958fuJzYGjKDoqbsiy9jLmXwsEmddmaOCf5sGU6wHfLl6E/N27r4e5KRdE\r\n9KtmYowFdiGjkZhaLS1SBuLBlFQOvan7PwwkNjG+h4vT/e+/5kP3JU4EFQPD\r\nUtabwCb8TKx79IfRsEVWdMUir106hfP2Y3rUzNUUNtmMsyyeki1qbnLhSJSA\r\nQAt43p83DLabtIqQRNIzja1V9rgFTmHOPnLv6GjzhVrRJi6rU1Caltf/WEaW\r\n31p692pBaKcvB1PyPHAB0kv896ioEL4SGA9yOZKSjFCqz/M2h92zVpZPidqE\r\nDH2h+49Gpuy9McMy2kucfxidcBviQLIKJ+TzKj+UmSounGtzrthVnAPwKcuA\r\nsU0JgltAKqITuuvHojo/qP0hL8MHPpS+t2nt8crd0QiRa7/Ca0xMcPBqvOPD\r\nBE7OwpK1X4Xt/L5GwcHGu/SCllX7CsCU20BqzTrWp5lt5leCsKzw3aMCc3wm\r\nHLwpZ6WBFvjRpLdUj2kMrip9lF8BdwPJyjfhxJvIGya3GUZ8qRUGyNIphY9g\r\njhtitEYjSZ7X0wk6XjMTIPpPNu80XS26wZYVxOJgkHtKgkyeO+MhkaRzx1d8\r\na83P/r+DKINeJXDT7zF7O+KVwWREJozlwe8=\r\n=4ZiQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dwelle","email":"luzar.david@gmail.com"},"directories":{},"maintainers":[{"name":"dwelle","email":"luzar.david@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tunnel-rat_0.1.1_1675195127993_0.5590696390850298"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-31T19:58:47.910Z","0.1.1":"2023-01-31T19:58:48.185Z","modified":"2023-01-31T19:58:48.419Z"},"maintainers":[{"name":"dwelle","email":"luzar.david@gmail.com"}],"description":"non gratum anus rodentum","homepage":"https://github.com/pmndrs/tunnel-rat#readme","keywords":["react","portal","tunnel"],"repository":{"type":"git","url":"git+https://github.com/pmndrs/tunnel-rat.git"},"author":{"name":"Paul Henschel"},"bugs":{"url":"https://github.com/pmndrs/tunnel-rat/issues"},"license":"MIT","readme":"<p align=\"center\">\n    <img src=\"https://user-images.githubusercontent.com/1061/185432665-ddfe409a-d399-4059-bd2f-bfefc2a97db1.png\" alt=\"Tunnel Rat\" height=\"600\">\n</p>\n\n[![Version](https://img.shields.io/npm/v/tunnel-rat?style=for-the-badge)](https://www.npmjs.com/package/tunnel-rat)\n[![Downloads](https://img.shields.io/npm/dt/tunnel-rat.svg?style=for-the-badge)](https://www.npmjs.com/package/tunnel-rat)\n[![Bundle Size](https://img.shields.io/bundlephobia/min/tunnel-rat?label=bundle%20size&style=for-the-badge)](https://bundlephobia.com/result?p=tunnel-rat)\n\n## Tunnel Rat\n\n- Digs tunnels for React elements to **go in** and **appear somewhere else**!\n- Works across **separate renderers** &ndash; use it to easily **render HTML elements from within your @react-three/fiber application**!\n- Squeak! 🐀\n\n## Examples & Sandboxes\n\n- https://codesandbox.io/s/basic-demo-forked-kxq8g\n- https://codesandbox.io/s/tunnel-rat-demo-ceupre\n\n## Usage\n\nCreate a tunnel:\n\n```tsx\nimport tunnel from 'tunnel-rat'\nconst t = tunnel()\n```\n\nUse the tunnel's `In` component to send one or more elements into the tunnel:\n\n```tsx\n<t.In>\n  <h1>Very cool!</h1>\n  <p>These will appear somewhere else!</p>\n</t.In>\n```\n\nSomewhere else, use the tunnel's `Out` component to render them:\n\n```tsx\n<t.Out />\n```\n\n## Examples\n\nThis example describes a simple React app that has both a HTML UI as well as a @react-three/fiber 3D scene. Each of these is rendered using separate React renderers, which traditionally makes emitting HTML from within the Canvas a bit of a pain; but thanks to tunnel-rat, this is now super easy!\n\n```jsx\nimport { Canvas } from '@react-three/fiber'\nimport tunnel from 'tunnel-rat'\n\n/* Create a tunnel. */\nconst ui = tunnel()\n\nconst App = () => (\n  <div>\n    <div id=\"ui\">\n      {/* Anything that goes into the tunnel, we want to render here. */}\n      <ui.Out />\n    </div>\n\n    {/* Here we're entering the part of the app that is driven by\n    @react-three/fiber, where all children of the <Canvas> component\n    are rendered by an entirely separate React renderer, which would\n    typically not allow the use of HTML tags. */}\n    <Canvas>\n      {/* Let's send something into the tunnel! */}\n      <ui.In>\n        <p>Hi, I'm a cube!</p>\n      </ui.In>\n\n      <mesh>\n        <boxGeometry />\n        <meshBasicMaterial />\n      </mesh>\n\n      {/* You can send multiple things through the tunnel, and\n      they will all show up in the order that you've defined them in! */}\n      <ui.In>\n        <p>And I'm a sphere!</p>\n      </ui.In>\n\n      <mesh>\n        <sphereGeometry />\n        <meshBasicMaterial />\n      </mesh>\n    </Canvas>\n  </div>\n)\n```\n\nOf course, the whole thing also works the other way around:\n\n```jsx\nimport { Canvas } from '@react-three/fiber'\nimport tunnel from 'tunnel-rat'\n\n/* Create a tunnel. */\nconst three = tunnel()\n\nconst App = () => (\n  <div>\n    <div id=\"ui\">\n      {/* Let's beam something into the R3F Canvas! */}\n      <three.In>\n        <mesh>\n          <sphereGeometry />\n          <meshBasicMaterial />\n        </mesh>\n      </three.In>\n    </div>\n\n    <Canvas>\n      {/* Render anything sent through the tunnel! */}\n      <three.Out />\n    </Canvas>\n  </div>\n)\n```\n","readmeFilename":"README.md"}