@chayns-components/core/lib/esm/components/masonry/Masonry.hooks.js

A set of beautiful React components for developing your own applications with chayns.

import { Children, useMemo } from 'react';
import { calculateColumnCount, calculateRowSpan, getMasonryItemKey, packMasonryGrid } from './Masonry.utils';
export const useMasonryItems = ({
  children
}) => useMemo(() => Children.toArray(children), [children]);
export const useMasonryLayout = ({
  items,
  itemHeights,
  columnCount,
  columnWidth,
  rowHeight,
  gap
}) => useMemo(() => {
  const layoutItems = items.map((item, index) => {
    const key = getMasonryItemKey(item, index);
    const height = itemHeights[key] ?? rowHeight;
    return {
      key,
      columns: item.props.columns ?? 1,
      rows: calculateRowSpan({
        height,
        rowHeight,
        gap
      })
    };
  });
  return packMasonryGrid({
    items: layoutItems,
    columnCount,
    columnWidth,
    rowHeight,
    gap
  });
}, [items, itemHeights, columnCount, columnWidth, rowHeight, gap]);
export const useMasonryColumnCount = ({
  containerWidth,
  columnWidth,
  gap
}) => useMemo(() => calculateColumnCount({
  containerWidth,
  columnWidth,
  gap
}), [containerWidth, columnWidth, gap]);
//# sourceMappingURL=Masonry.hooks.js.map