tunnel-rat
v0.1.2TypeScript
non gratum anus rodentum
2.2M/weekUpdated 2 years agoMITUnpacked: 26.4 KB
Published by Paul Henschel
npm install 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:
` These will appear somewhere else!tsx`
Very cool!
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
{/* You can send multiple things through the tunnel, and And I'm a sphere!
they will all show up in the order that you've defined them in! */}
)
`
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! /}
)
``