React

Для интеграции Masonry в React-проект используется пакет react-masonry-css, который является обёрткой над оригинальной библиотекой Masonry и обеспечивает удобную работу с компонентной архитектурой React. Установка производится через npm или yarn:

npm install react-masonry-css
# или
yarn add react-masonry-css

После установки компонент можно импортировать в нужном файле:

import Masonry from 'react-masonry-css';

Базовое использование Masonry в React

Библиотека использует сетку с адаптивными колонками. Основная идея — задать количество колонок для разных размеров экрана и обернуть элементы в компонент Masonry.

const breakpointColumnsObj = {
  default: 4,
  1100: 3,
  700: 2,
  500: 1
};

function Gallery({ items }) {
  return (
    <Masonry
      breakpointCols={breakpointColumnsObj}
      className="my-masonry-grid"
      columnClassName="my-masonry-grid_column"
    >
      {items.map((item, index) => (
        <div key={index} className="item">
          <img src={item.src} alt={item.title} />
        </div>
      ))}
    </Masonry>
  );
}

Ключевые моменты:

  • breakpointCols — объект, в котором ключи — ширины экрана, а значения — количество колонок.
  • className и columnClassName используются для кастомной стилизации сетки и колонок.
  • Каждый элемент должен иметь уникальный key для корректной работы React.

Кастомизация стилей Masonry

Для корректного отображения сетки необходимо добавить CSS:

.my-masonry-grid {
  display: flex;
  margin-left: -30px; /* Отрицательный margin для выравнивания колонок */
  width: auto;
}

.my-masonry-grid_column {
  padding-left: 30px; /* Отступ между колонками */
  background-clip: padding-box;
}

.item {
  margin-bottom: 30px; /* Расстояние между элементами внутри колонок */
  border-radius: 8px;
  overflow: hidden;
}

Эти стили создают адаптивную сетку с ровными отступами между колонками и элементами, а также обеспечивают визуальную аккуратность контента.

Динамическое обновление элементов

Masonry в React корректно работает с динамическими данными. При изменении массива items сетка автоматически перераспределяет элементы. Для анимации перестройки можно использовать CSS-переходы:

.item img {
  width: 100%;
  display: block;
  transition: transform 0.3s ease;
}

.item img:hover {
  transform: scale(1.05);
}

Для более сложных анимаций можно применять сторонние библиотеки, например framer-motion, вместе с Masonry.

Lazy loading и оптимизация изображений

Для больших галерей критично использовать ленивую загрузку изображений. В React это можно реализовать с помощью тега loading="lazy":

<img src={item.src} alt={item.title} loading="lazy" />

Также рекомендуется использовать оптимизированные форматы изображений (WebP, AVIF) и заранее задавать размеры контейнеров, чтобы избежать “скачков” при рендеринге Masonry.

Расширенные возможности Masonry

  1. Контроль порядка элементов: Masonry распределяет элементы по колонкам по порядку их появления в DOM. Для изменения логики расположения можно манипулировать массивом items перед передачей в компонент.
  2. Комбинация с React hooks: Для динамических галерей можно использовать useEffect и useState, чтобы подгружать новые элементы и обновлять сетку.
  3. События Masonry: В оригинальной библиотеке Masonry есть события (layoutComplete, removeComplete), которые можно отслеживать через ref и Masonry API для более сложного взаимодействия.
const masonryRef = useRef(null);

useEffect(() => {
  const instance = masonryRef.current;
  if (instance) {
    instance.on('layoutComplete', () => {
      console.log('Сетка обновлена');
    });
  }
}, []);

Советы по производительности

  • Минимизировать количество одновременно рендеримых элементов в сетке.
  • Использовать виртуализацию для очень больших галерей (например, с библиотекой react-virtualized).
  • Избегать тяжелых анимаций при каждой перестройке сетки.
  • Предварительно задавать размеры изображений для стабильного макета.

Интеграция с CSS Grid и Flexbox

Хотя Masonry реализует сетку самостоятельно, компоненты можно комбинировать с Flexbox или CSS Grid, чтобы создать гибридные макеты:

.gallery-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

Здесь Masonry отвечает за вертикальное позиционирование элементов, а CSS Grid — за общую адаптивность контейнера.

Поддержка SSR (Server-Side Rendering)

Для проектов на Next.js важно учитывать, что Masonry зависит от window. Чтобы избежать ошибок при SSR:

const MasonryComponent = dynamic(() => import('react-masonry-css'), { ssr: false });

Это гарантирует, что компонент будет рендериться только на клиенте, исключая конфликты при серверной генерации HTML.

Вывод

Использование Masonry в React позволяет создавать адаптивные, динамические и визуально аккуратные сетки. Ключевые аспекты — настройка колонок через breakpointCols, правильная стилизация className и columnClassName, ленивое подгружение изображений и контроль динамического контента через хуки. Masonry легко интегрируется с современными инструментами React, включая SSR, анимации и оптимизацию производительности, что делает его универсальным инструментом для создания сложных галерей и интерфейсных макетов.

Оглавление