react plock

React Plock adalah paket NPM ultra kecil yang dapat diguncang pohon ( kurang dari 1kb Gzipped ) yang memungkinkan Anda membuat tata letak batu yang luar biasa dengan pengalaman pengembang yang luar biasa. Dengan React Plock, Anda dapat dengan mudah membuat tata letak yang responsif dan dapat disesuaikan yang beradaptasi dengan berbagai ukuran dan perangkat layar.

Fitur

• Tata Letak Masonry : Buat tata letak batu yang indah dengan mudah.
• Balanced Layout : Buat jaringan batu yang lebih harmonis secara visual dengan mempertimbangkan ketinggian setiap item.
• Responsif : Secara otomatis beradaptasi dengan ukuran dan perangkat layar yang berbeda.
• Disesuaikan : Kustomisasi tata letak agar sesuai dengan kebutuhan Anda.
• TypeScript Ready : Dapatkan kekuatan bahasa yang aman jenis.
• DX Luar Biasa : Mudah digunakan dan didokumentasikan dengan baik.

Contoh

• Menggunakan Next.js 14 (Komponen Server) Lihat Demo Kerja
• Menggunakan vitej melihat demo kerja

Instalasi

npm install react-plock

Penggunaan

Menggunakan Plock dengan API V3 yang baru itu adalah sepotong kue. Berikut adalah contoh bagaimana Anda bisa membuat kisi batu. Anda bahkan dapat melihat demo contoh ini dengan mengklik di sini.

 import { Masonry } from 'react-plock' ;

const ImagesMasonry = ( ) => {
  const items = [ ... imageUrls ] ;

  return (
    < Masonry
      items = { items }
      config = { {
        columns : [ 1 , 2 , 3 ] ,
        gap : [ 24 , 12 , 6 ] ,
        media : [ 640 , 768 , 1024 ] ,
      } }
      render = { ( item , idx ) => (
        < img key = { idx } src = { item } style = { { width : '100%' , height : 'auto' } } />
      ) }
    />
  ) ;
} ;

Tata letak seimbang

React Plock menawarkan opsi tata letak seimbang yang menciptakan kisi batu yang lebih harmonis secara visual dengan mempertimbangkan ketinggian setiap item. Saat diaktifkan dengan useBalancedLayout: true , algoritma tata letak mendistribusikan item di seluruh kolom sambil mencoba untuk meminimalkan perbedaan ketinggian antara kolom.

Ini sangat berguna untuk konten dengan ketinggian yang bervariasi, seperti gambar atau kartu, di mana tata letak batu tradisional mungkin membuat kolom yang tidak rata.

Berbeda dengan tata letak default yang mendistribusikan item secara berurutan, tata letak seimbang secara dinamis mengukur dan menyesuaikan penempatan item untuk membuat hasil yang lebih estetis.

 < Masonry
  items = { items }
  config = { {
    columns : [ 2 , 3 , 4 ] ,
    gap : [ 16 , 16 , 16 ] ,
    media : [ 640 , 768 , 1024 ] ,
    useBalancedLayout : true , // Enable balanced layout
  } }
  render = { ( item ) => (
    < img src = { item . url } alt = { item . alt } style = { { width : '100%' } } />
  ) }
/>

Referensi API

Berikut definisi TypeScript untuk komponen batu, di bawah ini Anda dapat menemukan penjelasan yang lebih rinci.

 export type MasonryProps < T > = React . ComponentPropsWithoutRef < 'div' > & {
  items : T [ ] ;
  render : ( item : T , idx : number ) => React . ReactNode ;
  config : {
    columns : number | number [ ] ;
    gap : number | number [ ] ;
    media ?: number [ ] ;
    useBalancedLayout ?: boolean ;
  } ;
  as ?: React . ElementType ;
} ; 

Item

Prop ini menerima serangkaian elemen generik, masing -masing akan diteruskan ke properti render .

Memberikan

The Masonry Render Prop. Di sinilah Anda mendefinisikan gaya setiap ubin kisi, fungsi mengambil item looping saat ini dan indeks relatif.

Konfigurasi

Objek konfigurasi yang digunakan untuk menentukan jumlah kolom, kueri media dan celah antar item.

Alat peraga lainnya

Seperti yang dapat Anda lihat, dengan menggunakan React.ComponentPropsWithoutRef<"div"> Anda dapat dengan mudah meneruskan setiap properti yang tersedia ke Div, beberapa contoh adalah ID dan ClassName . Satu -satunya properti yang akan ditimpa akan menjadi style karena digunakan secara internal untuk generasi batu.

Catatan penting

Harap perhatikan bahwa jika Anda menyerahkan array ke atribut kolom dari properti config, jumlah elemen harus sama dengan jumlah media dan breakpoint kesenjangan yang disediakan!

 // Correct: This will be responsive with 3 breakpoints.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 1 , 2 , 3 ] ,
    gap : [ 12 , 16 , 20 ] ,
    media : [ 640 , 768 , 1024 ] ,
  } }
/>

// Correct: This will be responsive with 2 breakpoints.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 1 , 2 ] ,
    gap : [ 2 , 4 ] ,
    media : [ 640 , 1024 ] ,
  } }
/ >

// Correct: This will be fixed with 4 columns in every screen size.
< Masonry
  { ... otherProps }
  config = { {
    columns : 4 ,
    gap : 8
  } }
/>

// NOT Correct: This will cause trouble in rendering.
< Masonry
  { ... otherProps }
  config = { {
    columns : [ 4 ] ,
    media : [ 640 , 768 ] ,
  } }
/ >