[](https://www.npmjs.com/package/tunnel-rat)
[](https://www.npmjs.com/package/tunnel-rat)
[](https://bundlephobia.com/result?p=tunnel-rat)
## Tunnel Rat
- Digs tunnels for React elements to **go in** and **appear somewhere else**!
- Works across **separate renderers** – use it to easily **render HTML elements from within your @react-three/fiber application**!
- Squeak! 🐀
## Examples & Sandboxes
- https://codesandbox.io/s/basic-demo-forked-kxq8g
- https://codesandbox.io/s/tunnel-rat-demo-ceupre
## Usage
Create a tunnel:
```tsx
import tunnel from 'tunnel-rat'
const t = tunnel()
```
Use the tunnel's `In` component to send one or more elements into the tunnel:
```tsx
Very cool!
These will appear somewhere else!
```
Somewhere else, use the tunnel's `Out` component to render them:
```tsx
```
## Examples
This 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!
```jsx
import { Canvas } from '@react-three/fiber'
import tunnel from 'tunnel-rat'
/* Create a tunnel. */
const ui = tunnel()
const App = () => (
{/* Anything that goes into the tunnel, we want to render here. */}
{/* Here we're entering the part of the app that is driven by
@react-three/fiber, where all children of the
)
```
Of course, the whole thing also works the other way around:
```jsx
import { Canvas } from '@react-three/fiber'
import tunnel from 'tunnel-rat'
/* Create a tunnel. */
const three = tunnel()
const App = () => (
{/* Let's beam something into the R3F Canvas! */}
)
```
---
_Source: https://npm.io/package/tunnel-rat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
