react tunnels

Réagir les tunnels?

Rendez les composants de réaction dans les espaces réservés qui sont placés ailleurs dans l'arbre des composants.

Installer

 yarn add react-tunnels

Pourquoi

Il existe un cas d'utilisation commun dans les applications React où vous souhaitez définir une Layout où le contenu de certains éléments est défini par les composants children . Par exemple, vous souhaitez Layout une seule fois une seule fois et le réutiliser pour chaque page, mais il a une chapelure dont les étapes dépendent des composants children . Cette petite bibliothèque vous permet de définir des tunnels pour rendre d'un élément à tout autre élément de l'application, même des éléments situés sur le dessus de l'arbre. C'est comme Portal mais la cible est un composant au lieu d'un élément DOM .

Usage

Définissez un TunnelPlaceholder identifié par un id et décidez quelles propriétés seront transmises à sa fonction render en définissant des composants Tunnel avec le même ID ailleurs dans l'application. Si vous définissez un seul Tunnel ses accessoires seront transmis directement à la fonction render , s'il y a plus d'un Tunnel pour un seul id , la fonction render d'espace réservé recevra un argument item qui est un tableau contenant les props pour chaque Tunnel . Voyons quelques exemples.

Exemple simple: tunnels pour enfants

Définissez un espace réservé sans aucune fonction de rendu afin qu'il rende les enfants issus d'un composant Tunnel avec le même 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 >
)

Vérifiez le vrai exemple ici

Exemple plus complexe: construire une chapelure

Il est facile de construire une chapelure en utilisant le multiple de l'hélice dans le TunnelPlaceholder . Cela permet de lui faire savoir qu'il y aura plusieurs tunnels afin que la fonction render sera appelée avec un tableau d'accessoires.

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

Vérifiez l'exemple en direct ici

Bibliothèques similaires

• React Slot Fill: Un projet similaire construit par Cameron Westland avec une API légèrement différente et des cas d'utilisation un peu plus limités. La principale différence est que vous ne pouvez pas transmettre du contenu à un espace réservé à partir de plusieurs points d'entrée. React-Tunnels le fait en passant un tableau avec les accessoires définis par chaque tunnel à la fonction de rendu de l'espace réservé. Pour les cas simples, c'est assez similaire.
• Slots de préact: une bibliothèque similaire au remplissage des créneaux de react mais pour préact développé par Jason Miller.

À propos

Ce projet a été développé par Javi Velasco comme moyen de construire des composants de chapelure et des personnalisations Layout pour une variété de projets React. Tout frais, aide ou amélioration est très apprécié.

Licence

Ce projet est concédé sous licence de la licence du MIT.