react tunnels

Bereaksi terowongan?

Render Komponen Bereaksi di Penempatan yang ditempatkan di tempat lain di pohon komponen.

Memasang

 yarn add react-tunnels

Mengapa

Ada kasus penggunaan umum di aplikasi React di mana Anda ingin menentukan Layout di mana konten beberapa elemen ditentukan oleh komponen children . Misalnya, Anda ingin mendefinisikan Layout hanya sekali dan menggunakannya kembali untuk setiap halaman tetapi memiliki remah roti yang langkahnya bergantung pada komponen children . Perpustakaan kecil ini memungkinkan Anda untuk mendefinisikan terowongan untuk memberikan dari elemen ke elemen apa pun dalam aplikasi, bahkan elemen yang terletak di atas pohon. Ini seperti Portal tetapi targetnya adalah komponen , bukan elemen DOM .

Penggunaan

Tentukan TunnelPlaceholder yang diidentifikasi oleh id dan putuskan properti apa yang akan diteruskan ke fungsi render dengan mendefinisikan komponen Tunnel dengan ID yang sama di tempat lain di aplikasi. Jika Anda mendefinisikan hanya satu Tunnel alat peraganya akan diteruskan langsung ke fungsi render , jika ada lebih dari satu Tunnel untuk id tunggal, fungsi render placeholder akan menerima argumen item yang merupakan array yang berisi props untuk setiap Tunnel . Mari kita lihat beberapa contoh.

Contoh Sederhana: Anak -anak Terowongan

Tentukan placeholder tanpa fungsi render sehingga akan membuat setiap anak yang berasal dari komponen Tunnel dengan ID yang sama.

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

Periksa contoh sebenarnya di sini

Contoh yang lebih kompleks: Membangun remah roti

Sangat mudah untuk membangun remah roti menggunakan multiple prop di TunnelPlaceholder . Ini memungkinkan untuk memberi tahu bahwa akan ada beberapa terowongan sehingga fungsi render akan dipanggil dengan berbagai alat peraga.

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

Periksa contoh langsung di sini

Perpustakaan serupa

• React Slot Fill: Proyek serupa yang dibangun oleh Cameron Westland dengan API yang sedikit berbeda dan kasus penggunaan yang sedikit lebih terbatas. Perbedaan utama adalah Anda tidak dapat meneruskan konten ke placeholder dari beberapa titik masuk. React-tunnels melakukan ini dengan melewati array dengan alat peraga yang ditentukan oleh masing-masing terowongan ke fungsi render dari placeholder. Untuk kasus sederhana, ini sangat mirip.
• Slot Preact: Perpustakaan yang mirip dengan pengisian slot reaksi tetapi untuk pra -awal yang dikembangkan oleh Jason Miller.

Tentang

Proyek ini telah dikembangkan oleh Javi Velasco sebagai cara untuk membangun komponen remah roti dan penyesuaian Layout untuk berbagai proyek React. Setiap feeback, bantuan, atau perbaikan sangat dihargai.

Lisensi

Proyek ini dilisensikan berdasarkan ketentuan lisensi MIT.