react plock

React Plock-это ультра-маленький пакет NPM, увязывающий дерево ( менее 1 КБ GZIPPED ), который позволяет создавать удивительные масонские макеты с удивительным опытом разработчика. С помощью React Plock вы можете легко создать адаптивные и настраиваемые макеты, которые адаптируются к различным размерам и устройствам экрана.

Функции

• Масонство с легкостью создайте красивые масонские макеты.
• Сбалансированная планировка : создайте более визуально гармоничную сетку кладки, учитывая высоту каждого предмета.
• Адаптивно : автоматически адаптируется к разным размерам и устройствам.
• Настраиваемый : настроить макет в соответствии с вашими потребностями.
• TypeScript Ready : Получите силу, безопасные для типа языков.
• Удивительный DX : простой в использовании и хорошо документирован.

Примеры

• Использование Next.js 14 (компоненты сервера) см. Рабочая демо
• Использование Vitejs см. Рабочая демо

Установка

npm install react-plock

Использование

Используя Plock с новым API V3, это кусок торта. Вот пример того, как вы можете создать каменную сетку. Вы даже можете увидеть демонстрацию этого примера, нажав здесь.

 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

Вот определение TypeScript для компонента кладки, ниже вы можете найти более подробное объяснение.

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

Предметы

Эта опора принимает общий массив элементов, каждый из которых будет передана в рендеринговое свойство.

Оказывать

Каменная каменная опора. Здесь вы определяете стили каждой плитки сетки, функция принимает текущий пункт цикла и относительный индекс.

Конфигурация

Объект конфигурации, который используется для определения количества столбцов, запросов носителей и пробелов между элементами.

Другие реквизиты

Как вы можете видеть, используя 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 ] ,
  } }
/ >