react-responsive-masonry is a lightweight React component library for creating responsive masonry layouts using CSS Flexbox. It provides two main components: `Masonry` for a static column count and `ResponsiveMasonry` for dynamically adjusting columns and gutters based on breakpoints. The current stable version is 2.7.2. Releases appear to be driven by bug fixes and minor feature enhancements rather than a strict cadence, with the last major update to v2.0.0 in 2020 introducing ES6 modules. Its key differentiator is its simplicity and reliance on flexbox, avoiding complex JavaScript layout algorithms for performance and ease of use, making it suitable for image galleries or card layouts where item order isn't strictly sequential.
npm install react-responsive-masonryVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to set up a responsive masonry layout using both `ResponsiveMasonry` and `Masonry` components, showing how columns and gutters adapt to different screen sizes.
Ensure your bundler (Webpack, Rollup, Parcel) is configured to handle `module` and `main` fields in `package.json` correctly. If issues persist, try explicitly configuring aliases or adjusting import paths if applicable, though this is rarely necessary.
Always import `Masonry` as a default export (`import Masonry from '...'`) and `ResponsiveMasonry` as a named export (`import { ResponsiveMasonry } from '...'`). For both, use `import Masonry, { ResponsiveMasonry } from '...'`.Ensure `prop-types` is installed (`npm install prop-types`) and your React version is 15.5 or higher. For React v16+, `prop-types` is still required as a separate package.
Ensure `Masonry` always receives valid React children (e.g., `<Masonry>{items.map(item => <div key={item.id}>{item.content}</div>)}</Masonry>`) or handles the empty state gracefully.Check your import statements. `Masonry` should be imported as a default, and `ResponsiveMasonry` as a named import. Example: `import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'`.While `Masonry` is designed for multiple children, if this specific error appears (which might indicate an unusual environment or library conflict), ensure children are wrapped in a fragment or array explicitly if required, though typically direct children are passed. Double-check your React version compatibility and ensure no other libraries are interfering with prop type validation.