{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-responsive-masonry"],"cli":null},"imports":["import Masonry from 'react-responsive-masonry'","import { ResponsiveMasonry } from 'react-responsive-masonry'","import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}