react tunnels

Reaja túneis?

Renderizar componentes de reação em espaços reservados que são colocados em outro lugar na árvore de componentes.

Instalar

 yarn add react-tunnels

Por que

Existe um caso de uso comum nos aplicativos React, onde você deseja definir um Layout em que o conteúdo de alguns elementos é definido por componentes children . Por exemplo, você deseja definir Layout apenas uma vez e reutilizá -lo para todas as páginas, mas possui uma troca de pão cujos passos dependem dos componentes children . Esta pequena biblioteca permite que você defina túneis para renderizar de um elemento para qualquer outro elemento no aplicativo, até os elementos localizados no topo da árvore. É como Portal , mas o alvo é um componente em vez de um elemento DOM .

Uso

Defina um TunnelPlaceholder identificado por um id e decida quais propriedades serão passadas para sua função render definindo componentes Tunnel com o mesmo ID em qualquer outro lugar do aplicativo. Se você definir apenas um único Tunnel seus adereços serão passados diretamente para a função render , se houver mais de um Tunnel para um único id , a função render Rendered receberá um argumento item que é uma matriz que contém os props para cada Tunnel . Vamos ver alguns exemplos.

Exemplo simples: Tunelamento infantil

Defina um espaço reservado sem nenhuma função de renderização, para que ela renderize quaisquer crianças provenientes de um componente Tunnel com o mesmo ID.

 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 >
)

Verifique o verdadeiro exemplo aqui

Exemplo mais complexo: construir uma troca de pão

É fácil construir uma farinha de pão usando o suporte multiple no TunnelPlaceholder . Isso permite que ele saiba que haverá vários túneis para que a função render seja chamada com uma matriz de adereços.

 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 >
)

Verifique o exemplo ao vivo aqui

Bibliotecas semelhantes

• React Slot preenchimento: um projeto semelhante construído por Cameron Westland com uma API ligeiramente diferente e casos de uso um pouco mais limitados. A principal diferença é que você não pode transmitir conteúdo para um espaço reservado a partir de vários pontos de entrada. O React-Tunnells faz isso passando uma matriz com os adereços definidos por cada túnel para a função de renderização do espaço reservado. Para casos simples, porém, é bastante semelhante.
• PREACT Slots: uma biblioteca semelhante ao React Slot preenchimento, mas para o PrEACT desenvolvido por Jason Miller.

Sobre

Este projeto foi desenvolvido por Javi Velasco como uma maneira de construir componentes e personalizações Layout para uma variedade de projetos de reação. Qualquer taxa, ajuda ou melhorias é muito apreciada.

Licença

Este projeto está licenciado nos termos da licença do MIT.