Masonic is a high-performance masonry layout component for React that uses virtualization to efficiently render large datasets. It can seamlessly display tens of thousands of grid cells without performance degradation.
- Virtualized rendering (only visible items)
- Automatic resizing and reflow
- Lazy loading support
- Smooth scrolling performance
- Responsive column configuration
- Variable item heights
- SSR support
- TypeScript support
- Accessible by default
- Custom render props
- Infinite scroll integration
- Scroll restoration
- Window and element scrolling
- Customizable gap spacing
- Masonry: Standard virtualized masonry
- MasonryScroller: With scroll container
- useInfiniteLoader: Infinite scroll hook
- usePositioner: Custom positioning
- useMasonry: Imperative API
- Only renders visible items
- Efficiently handles 10,000+ items
- Minimal re-renders
- Optimized scroll handling
- Smart item measurement
- Large image galleries
- Product catalogs
- News feed layouts
- Pinterest-style interfaces
- Portfolio sites with many projects
- Media libraries
Free and open-source under the MIT license.