Tunnel Rat

[![Version](https://img.shields.io/npm/v/tunnel-rat?style=for-the-badge)](https://www.npmjs.com/package/tunnel-rat) [![Downloads](https://img.shields.io/npm/dt/tunnel-rat.svg?style=for-the-badge)](https://www.npmjs.com/package/tunnel-rat) [![Bundle Size](https://img.shields.io/bundlephobia/min/tunnel-rat?label=bundle%20size&style=for-the-badge)](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! */}

) ```

Paquete	Descargas	Stars	Tamaño	Issues	Publicación	Licencia

tunnel-rat	473,904	416	26.4 kB	9	hace 2 años	MIT