{"id":11843,"library":"react-responsive-masonry","title":"React Responsive Masonry","description":"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.","status":"active","version":"2.7.2","language":"javascript","source_language":"en","source_url":"https://github.com/cedricdelpoux/react-responsive-masonry","tags":["javascript","react","masonry","css","flexbox","responsive","typescript"],"install":[{"cmd":"npm install react-responsive-masonry","lang":"bash","label":"npm"},{"cmd":"yarn add react-responsive-masonry","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-responsive-masonry","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications. Updated to v16 in v1.4.0.","package":"react","optional":false},{"reason":"Peer dependency for prop validation, added in v1.2.0.","package":"prop-types","optional":true}],"imports":[{"note":"`Masonry` is a default export, while `ResponsiveMasonry` is a named export. This is a common source of confusion.","wrong":"import { Masonry } from 'react-responsive-masonry'","symbol":"Masonry","correct":"import Masonry from 'react-responsive-masonry'"},{"note":"`ResponsiveMasonry` is a named export, while `Masonry` is a default export.","wrong":"import ResponsiveMasonry from 'react-responsive-masonry'","symbol":"ResponsiveMasonry","correct":"import { ResponsiveMasonry } from 'react-responsive-masonry'"},{"note":"While v2.0.0 added CommonJS build, the primary usage pattern for React components typically leverages ESM syntax. The component is also available via UMD for direct script inclusion.","wrong":"const { Masonry, ResponsiveMasonry } = require('react-responsive-masonry');","symbol":"Masonry, ResponsiveMasonry","correct":"import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'"}],"quickstart":{"code":"import React from 'react';\nimport Masonry, { ResponsiveMasonry } from 'react-responsive-masonry';\n\n// Imagine these are your child components or elements\nconst ChildA = () => <div style={{ height: '100px', background: '#e0e0e0', margin: '5px' }}>Item A</div>;\nconst ChildB = () => <div style={{ height: '150px', background: '#d0d0d0', margin: '5px' }}>Item B</div>;\nconst ChildC = () => <div style={{ height: '80px', background: '#c0c0c0', margin: '5px' }}>Item C</div>;\nconst ChildD = () => <div style={{ height: '200px', background: '#b0b0b0', margin: '5px' }}>Item D</div>;\nconst ChildE = () => <div style={{ height: '120px', background: '#a0a0a0', margin: '5px' }}>Item E</div>;\nconst ChildF = () => <div style={{ height: '90px', background: '#909090', margin: '5px' }}>Item F</div>;\n\nfunction App() {\n  return (\n    <div style={{ padding: '20px', maxWidth: '1200px', margin: '0 auto' }}>\n      <h1>Responsive Masonry Example</h1>\n      <ResponsiveMasonry\n        columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3, 1200: 4 }}\n        gutterBreakPoints={{ 350: \"10px\", 750: \"15px\", 900: \"20px\", 1200: \"25px\" }}\n      >\n        <Masonry gutter=\"10px\">\n          <ChildA />\n          <ChildB />\n          <ChildC />\n          <ChildD />\n          <ChildE />\n          <ChildF />\n          {/* More children here */}\n        </Masonry>\n      </ResponsiveMasonry>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Version 2.0.0 restructured the package to include separate ES6, CommonJS, and UMD builds. While existing import paths *should* mostly work due to `package.json` configurations, developers might experience issues if their build tools do not correctly resolve the new module entry points, especially in older environments.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"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 '...'`.","message":"The `Masonry` component is a default export, while `ResponsiveMasonry` is a named export. Misunderstanding this can lead to 'is not a function' or 'undefined' errors.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"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.","message":"Prior to v1.2.0, `prop-types` was not explicitly listed as a peer dependency. In v1.2.0, `prop-types` was added to `peerDependencies`, and `react` was updated to `15.5`. If using an older React version (pre-15.5) or not having `prop-types` installed, you might encounter warnings or runtime errors related to prop validation.","severity":"breaking","affected_versions":">=1.2.0 <16.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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.","cause":"This often occurs when `Masonry` is rendered without any children or its children prop is not an array-like structure.","error":"TypeError: Cannot read properties of undefined (reading 'length')"},{"fix":"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'`.","cause":"This error typically indicates an incorrect import for `Masonry` or `ResponsiveMasonry` (e.g., trying to use a named import for `Masonry` which is a default export).","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"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.","cause":"This warning, though uncommon for this specific library, could arise if React's development mode mistakenly applies a stricter `children` propType check or if the library's internal `children` handling expects a specific format.","error":"Warning: Failed prop type: Invalid prop `children` of type `array` supplied to `Masonry`, expected a single React element."}],"ecosystem":"npm"}