react-masonry-grid-layout v2.1.0

React Masonry Grid Layout

A lightweight, dependency-free React component for creating responsive masonry layouts with absolute positioning.

Breaking Changes in 2.0.0

• Complete rewrite for better performance and stability
• Removed external dependencies (framer-motion, tailwindcss)
• Improved image handling and layout calculation
• Enhanced customization options

Features

• Responsive grid layout
• Dynamic height calculation
• Image loading optimization
• Customizable styling
• Filtering support
• Zero dependencies
• 반응형 이미지 높이 자동 계산
• 컨테이너 크기 변경 시 자동 리사이징
• 레이아웃 계산 성능 개선

Installation

npm install react-masonry-grid-layout

Basic Usage

import { MasonryGrid, MasonryItem } from 'react-masonry-grid-layout';

const App = () => (
    <MasonryGrid columnWidth={300} gap={16}>
        <MasonryItem height={200}>
            <img src="..." alt="..." />
        </MasonryItem>
    </MasonryGrid>
);

Image Loading Optimization

import { useImageCache } from 'react-masonry-grid-layout';

const ImageComponent = ({ src }) => {
    const { loadImage, isImageLoaded } = useImageCache();
    
    useEffect(() => {
        loadImage(src);
    }, [src]);

    return <img src={src} style={{ opacity: isImageLoaded(src) ? 1 : 0 }} />;
};

Props

MasonryGrid

MasonryItem

Version History

1.3.0

• 이미지 자동 높이 계산 기능 추가
  • 이미지 로딩 후 실제 높이 기반 레이아웃
  • 로딩 중 기본 높이(300px) 적용
  • 이미지 캐싱 최적화

1.2.5

• 컬럼 위치 계산 로직 수정
  • x 좌표 계산 시 컨테이너 패딩 적용
  • 컬럼별 아이템 관리 방식 개선
  • 레이아웃 계산 안정성 향상

1.2.4

• 컬럼 위치 계산 로직 수정
  • 컨테이너 패딩 적용 버그 수정
  • 컬럼 간격 계산 정확도 개선
  • 아이템 배치 알고리즘 최적화

1.2.3

• 컴포넌트 언마운트 시 에러 수정
• 레이아웃 계산 로직 안정성 개선
• 이미지 높이 기반 컬럼 위치 계산 버그 수정

1.2.2

• 메이슨리 레이아웃 계산 로직 개선
  • 컬럼별 아이템 관리 방식으로 변경
  • 이미지 높이 계산 방식 개선 (기본값 300px)
  • 컬럼 간격(gap) 계산 오류 수정
  • 컨테이너 높이 계산 방식 개선
• 레이아웃 렌더링 성능 최적화

1.2.0

• 개발 서버를 serve에서 vite로 변경
• 빌드 설정 개선
• 타입스크립트 설정 개선
• 번들 크기 최적화

1.0.3

• 이미지 로딩 상태 관리 개선
• 레이아웃 초기화 시점 조정
• ResizeObserver 메모리 누수 문제 해결
• 이미지 캐싱 기능 추가
• 컴포넌트 마운트 전 초기화 로직 추가

License

MIT © Your Name