react tunnels

Tunnel reagieren?

Reagieren Sie die Komponenten in Profiltern, die an einem anderen Ort im Komponentenbaum platziert sind.

Installieren

 yarn add react-tunnels

Warum

In React -Apps gibt es einen gemeinsamen Anwendungsfall, in dem Sie ein Layout definieren möchten, bei dem der Inhalt einiger Elemente durch children definiert wird. Zum Beispiel möchten Sie Layout nur einmal definieren und für jede Seite wiederverwenden, aber es hat ein Brotcrumb, dessen Schritte von children abhängen. Mit dieser winzigen Bibliothek können Sie Tunnel definieren, um von einem Element zu einem anderen Element in der App zu rendern, auch Elemente, die sich oben am Baum befinden. Es ist wie Portal , aber das Ziel ist eine Komponente anstelle eines DOM -Elements .

Verwendung

Definieren Sie einen durch eine id identifizierten TunnelPlaceholder und entscheiden Sie, welche Eigenschaften an seine render übergeben werden sollen, indem Tunnel mit derselben ID überall in der App definiert werden. Wenn Sie nur einen einzelnen Tunnel definieren, werden seine Requisiten direkt an die render übergeben. Wenn mehr als ein Tunnel für eine einzelne id vorhanden ist, erhält die Platzhalter render ein item , das die props für jeden Tunnel enthält. Lassen Sie uns einige Beispiele sehen.

Einfaches Beispiel: Kindertunneling

Definieren Sie einen Platzhalter ohne Renderfunktion, damit Kinder von einer Tunnel mit derselben ID stammen.

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

Überprüfen Sie das eigentliche Beispiel hier

Komplexer

Es ist einfach, ein Breadcrumb zu bauen, indem Sie das Prop multiple im TunnelPlaceholder befinden. Dies ermöglicht es, mit einem Array von Requisiten mehrere Tunnel zu erzielen, sodass die render aufgerufen wird.

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

Überprüfen Sie das Live -Beispiel hier

Ähnliche Bibliotheken

• React Slot Fill: Ein ähnliches Projekt, das von Cameron Westland mit einer etwas anderen API und etwas begrenzteren Anwendungsfällen erstellt wurde. Der Hauptunterschied besteht darin, dass Sie Inhalte aus mehreren Einstiegspunkten nicht an einen Platzhalter weitergeben können. React-Tunnels führt dies durch, indem es ein Array mit den von jedem Tunnel definierten Requisiten zur Renderfunktion des Platzhalters übergibt. Für einfache Fälle ist es jedoch ziemlich ähnlich.
• Preact -Slots: Eine Bibliothek ähnlich der React -Slot -Füllung, jedoch für Preact, die von Jason Miller entwickelt wurde.

Um

Dieses Projekt wurde von Javi Velasco entwickelt, um Brotkomponenten und Layout für eine Vielzahl von React -Projekten zu erstellen. Feeback, Hilfe oder Verbesserungen werden sehr geschätzt.

Lizenz

Dieses Projekt ist gemäß den Bedingungen der MIT -Lizenz lizenziert.