react tunnels

Reaccionar túneles?

Renderizar componentes reaccionados en marcadores de posición que se colocan en otro lugar en el árbol de componentes.

Instalar

 yarn add react-tunnels

Por qué

Hay un caso de uso común en las aplicaciones React donde desea definir un Layout donde el contenido de algunos elementos está definido por los componentes children . Por ejemplo, desea definir Layout solo una vez y reutilizarlo para cada página, pero tiene una cañón de pan cuyos pasos dependen de los componentes children . Esta pequeña biblioteca le permite definir túneles para renderizar de un elemento a cualquier otro elemento en la aplicación, incluso elementos ubicados en la parte superior del árbol. Es como Portal , pero el objetivo es un componente en lugar de un elemento DOM .

Uso

Definir un TunnelPlaceholder que se identifica por una id y decida qué propiedades se pasarán a su función render definiendo los componentes Tunnel con la misma ID en cualquier otro lugar de la aplicación. Si define solo un Tunnel único, sus accesorios se pasarán directamente a la función render , si hay más de un Tunnel para una sola id , la función render de poseedor recibirá un argumento item que es una matriz que contiene los props para cada Tunnel . Veamos algunos ejemplos.

Ejemplo simple: túneles para niños

Defina un marcador de posición sin ninguna función de renderizado para que cualquier niño provenga de un componente Tunnel con la misma identificación.

 import { TunnelProvider , TunnelPlaceholder , Tunnel } from 'react-tunnels'

render (
  < TunnelProvider >
    < div >
      < TunnelPlaceholder id = "my-tunnel" />
      < Tunnel id = "my-tunnel" >
        This will be rendered on the placeholder ?
      </ Tunnel >
    </ div >
  </ TunnelProvider >
)

Consulte el ejemplo real aquí

Ejemplo más complejo: construir un pan de pan

Es fácil construir una cáscara de pan utilizando el multiple de apoyo en el túnel en TunnelPlaceholder . Esto le permite saber que habrá múltiples túneles para que la función render se llame con una variedad de accesorios.

 const Breadcrumbs = ( ) => (
  < TunnelPlaceholder id = "breadcrumb" multiple >
    { ( { items } ) => (
      items . map ( ( { children , href } ) => (
        < span > < a href = { href } > { children } </ a > </ span >
      ) )
    ) }
  </ TunnelPlaceholder >
)

const Breadcrumb = ( { children , url } ) => (
  < Tunnel id = "breadcrumb" href = { url } >
    { children }
  </ Tunnel >
)

render (
  < TunnelProvider >
    { /* This will render the breadcrumb */ }
    < Breadcrumbs />
    { /* Somewhere else in children */ }
    < Breadcrumb url = "/products" > Products </ Breadcrumb >
    < Breadcrumb url = "/products/123" > Product < strong > 123 </ strong > </ Breadcrumb >
  </ TunnelProvider >
)

Mira el ejemplo en vivo aquí

Bibliotecas similares

• React Slot Complet: un proyecto similar construido por Cameron Westland con una API ligeramente diferente y un poco más de casos de uso limitados. La principal diferencia es que no puede pasar contenido a un marcador de posición desde múltiples puntos de entrada. React-Tunnels hace esto pasando una matriz con los accesorios definidos por cada túnel a la función de renderizado del marcador de posición. Sin embargo, para casos simples, es bastante similar.
• Ranuras previas: una biblioteca similar al relleno de ranura React pero para preact desarrollado por Jason Miller.

Acerca de

Este proyecto ha sido desarrollado por Javi Velasco como una forma de construir componentes de pan de pan y personalizaciones Layout para una variedad de proyectos React. Cualquier tarifa, ayuda o mejoras es muy apreciada.

Licencia

Este proyecto tiene licencia bajo los términos de la licencia MIT.