react plock

React Plock是一種可搖晃的超小NPM包裝（小於1KB的GZB ），可讓您創建具有驚人開發人員體驗的驚人磚石佈局。使用React Plock，您可以輕鬆地創建適應不同屏幕尺寸和設備的響應式和可自定義的佈局。

特徵

• 砌體佈局：輕鬆創建美麗的磚石佈局。
• 平衡佈局：通過考慮每個項目的高度來創建一個更具視覺和諧的砌體網格。
• 響應：自動適應不同的屏幕尺寸和設備。
• 可自定義：自定義佈局以符合您的需求。
• 準備就緒：獲取類型安全語言的強度。
• 令人驚嘆的DX ：易於使用且有據可查。

例子

• 使用Next.js 14（服務器組件）請參閱工作演示
• 使用ViteJS查看工作演示

安裝

npm install react-plock

用法

使用新的V3 API使用Plock這是一塊小菜。這是如何創建砌體網格的一個示例。您甚至可以通過單擊此處查看此示例的演示。

 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' } } />
      ) }
    />
  ) ;
} ;

平衡佈局

React Plock提供了平衡的佈局選項，該選項通過考慮每個項目的高度來創建更具視覺和諧的砌體網格。當使用useBalancedLayout: true啟用時，佈局算法會在列之間分發項目，同時試圖最大程度地減少列之間的高度差異。

這對於具有不同高度的內容（例如圖像或卡片）特別有用，在這些高度上，傳統的砌體佈局可能會創建不平衡的列。

與依次分配項目的默認佈局不同，平衡的佈局動態測量並調整項目位置以創建更加美觀的結果。

 < 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%' } } />
  ) }
/>

API參考

這是砌體組件的打字稿定義，您可以找到更詳細的說明。

 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 ;
} ; 

專案

該道具接受了一系列元素，每個元素都將傳遞給渲染屬性。

使成為

砌體渲染道具。在這裡，您可以定義網格的每個瓷磚的樣式，該功能採用當前循環項目和相對索引。

config

用於定義項目之間的列數，媒體查詢和差距的配置對象。

其他道具

如您所見，通過使用React.ComponentPropsWithoutRef<"div">您可以簡單地將每個可用屬性傳遞給Div，一些示例是ID和className 。唯一將被覆蓋的屬性將是style ，因為內部用於砌體一代。

重要說明

請注意，如果您將數組傳遞給配置屬性的列屬性，則元素的數量必須等於提供的媒體和差距斷點的數量！

 // 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 ] ,
  } }
/ >