VueCraft NPM

React-компонент ​

Рендерит одну измеряемую обёртку <div> на каждую карточку вокруг того, что возвращает для неё children — содержимое карточки остаётся полностью вашим, это только измеряет и расставляет обёртку. При включённом options.virtualize обёртку/вызов рендера реально получают только карточки, видимые прямо сейчас (± overscan) — остальные существуют только как оценка внутри движка, не в DOM. Смотрите Виртуализацию.

tsx
<MasonryGrid items={items} options={{ columns: 'auto', minLaneSize: 240 }}>
  {(item) => <MyCard data={item} />}
</MasonryGrid>

Пропсы ​

items ​

MasonryGridItem[] · обязателен

Та же форма, что и у MasonryItemDescriptor ядра (смотрите Элементы и бенто-спаны), без el — компонент сам создаёт и владеет обёрткой каждой карточки. Все поля опциональны, включая id: id, colSpan, rowSpan, aspectRatio, estimatedSize, order.

Если id не задан, компонент сам генерирует стабильный id по ссылке на сам объект карточки (WeakMap) — тот же объект в массиве получает тот же id на любом ре-рендере. Если же элементы items каждый раз пересобираются в новые объекты (например, .map() над исходными данными на каждый рендер), у каждого такого объекта будет новый сгенерированный id — тогда лучше задать id явно из собственных данных.

options ​

MasonryOptions · опционально, по умолчанию {}

Передаётся напрямую в createMasonryEngine() — смотрите API движка. У ядра нет живого updateOptions(), поэтому изменение содержимого options (сравнивается структурно через optionsEqual, а не только по ссылке — компонент сам мемоизирует это внутри) пересоздаёт движок. Оборачивать в useMemo самостоятельно по этой причине не обязательно, хотя это избавит от внутреннего сравнения на каждый рендер.

sortable ​

boolean · по умолчанию: false

Превращает каждую обёртку карточки в клавиатурно-пересортируемую — смотрите «Сортировка» ниже.

onLayout ​

(items: MasonryItemLayout[]) => void · опционально

Вызывается на каждый пересчёт раскладки движком, с посчитанным прямоугольником каждой карточки.

onReorder ​

(items: MasonryGridItem[]) => void · опционально

Вызывается, когда пользователь пересортировывает карточку с клавиатуры (только при sortable), с пересортированным массивом — смотрите «Сортировка» ниже. <MasonryGrid> никогда не изменяет items сам; применение нового порядка к вашему собственному состоянию — задача этого колбэка.

children ​

(item: MasonryGridItem) => ReactNode · обязателен

Вызывается по одному разу на каждую карточку в items (или на каждую видимую прямо сейчас карточку, при virtualize) — React-эквивалент слота #item у Vue-адаптера. Render-prop функция, а не обычный JSX-дочерний элемент: <MasonryGrid>{someElement}</MasonryGrid> — неверно, должно быть <MasonryGrid>{(item) => someElement}</MasonryGrid>.

Сортировка ​

tsx
import { useState } from 'react'
import { MasonryGrid } from '@macrulez/masonry-kit-react'

function Board() {
  const [items, setItems] = useState([{ id: 'a' }, { id: 'b' }, { id: 'c' }])

  return (
    <MasonryGrid items={items} sortable onReorder={setItems}>
      {(item) => <MyCard data={item} />}
    </MasonryGrid>
  )
}

При включённом sortable каждая обёртка карточки становится управляемой с клавиатуры — поведение идентично sortable у Vue-компонента (смотрите Компонент MasonryGrid за полным разбором по клавишам: пробел/enter поднять или отпустить, стрелки — переместить, escape — отменить). Единственное отличие — форма колбэка: React вызывает onReorder(items) вместо испускания Vue-события, и никогда не изменяет items сам — onReorder это и есть место, где новый порядок применяется к вашему собственному состоянию, так же как setItems выше.

Действуют те же ARIA-атрибуты (role="button", aria-roledescription, aria-pressed, aria-describedby) и озвучивание через визуально скрытый live-регион, что и у Vue-компонента. Указательный/тач-drag намеренно не реализован — смотрите Обзор о том, почему.