Hello,

Was there any particular reason why peerDependencies got removed with 2.1.5.

Reason for this issue
This change (missing peerDependencies) negatively affects package managers that rely on package.json to resolve dependencies (for example yarn PnP) rather than depending on node module resolution algorithm.

So, I get this warning when giving gutter as number
Warning: Failed prop type: Invalid prop gutterof typenumbersupplied toMasonry2, expected string.
But the gutter value takes effect only when its number and not a string.

I belive thats a bug causing strange flickering when you are using multiple breakpoints,
for example i have 1 column for mobile, and 2 columns for desktop, but when i refresh page on desktop i see for a slight moment the mobile version, and with server side rendering its very noticeable

Hey,

This is a feature request for having the gutter size based on the media queries. Gutter is currently a string on the Masonry component, so there are a couple of ways to go about this. I don't mind doing the legwork if I can get some direction...

Hello, thanks for greate library! I'm wondering if you can provide sorting items function base on column height, for example the shortest column will have next items. Looking foward to this function :D

if we can take option for user
alight item - start, end, center

Hello

when my project is compiled, the divs that belong to the masonry include [object Object] within some attributes:

<div __self="[object Object]" __source="[object Object]">
    ...
</div>

It relies on React hook componentDidMount and that is never being called on server.

Build is failing with the recent updated version - version - 2.1.2

I just wanted to say... this is the only React Masonry package that really works out of the box.
It's awesome!! Thanks a lot for making this.

While installing in my react18 project (default for new NextJS projects)

npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]

Does anyone have an example where you can filter the grid images by categories while keeping the grid on the new active selections. I've tested and it's easy enough by adding css classes to each image, listening to what's selected and hiding all other images, but when there are 3 columns the grid, leaves empty columns that cannot be removed.

Any thoughts?

My case isn't particularly complex. I just want the items to fit on the screen. There are edge cases I could think of with setting a max height, like if there was an image with a 0.1 aspect ratio, but I'm not concerned with that.

Hey,

thanks for the project! 💯
Sadly my CI currently fails as it expects the types declared.

Try `npm i --save-dev @types/react-responsive-masonry` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-responsive-masonry';`

Now, I have never done this and would try to do it, however, if it an easy task for you I'd appreciate the help.
Let me know!

I get an error when compiling with this package.

Error in ./src/App.js
Module not found: 'react-responsive-masonry' in ./.

After looking around I noticed that main in package.json is pointing toward nothing.
I ran the build script to get the lib/ folder and now it's working fine.

For example -

                    <ResponsiveMasonry
                      columnsCountBreakPoints={{
                        350: 1,
                        750: 3,
                        900: 4
                      }}
                    >
                      <Masonry gutter={'15px'}>
                        {items.map((item) => {
                            <somecustomcomponent />
                        }))
                      </Masonry>
                   </ResponsiveMasonry>

If i want to delete/remove the custom component and also refresh the list, so that it can rearrange the list or trigger it to rearrange again. How can I do it?

how to fix 'Image elements do not have explicit width and height' in pageSpeed.

I'm trying to install this package for my React project. I have React version 17.0.1. Here is the error that my console gives to me when I try to install it:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"17.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0" from [email protected]
npm ERR! node_modules/react-responsive-masonry
npm ERR! react-responsive-masonry@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/serg/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/serg/.npm/_logs/2021-02-25T06_41_26_421Z-debug.log

Hi! Thank you for this library.

When using the <Masonry> component, sometimes we conditionally hide the children. This however messes up the layout, see https://codesandbox.io/s/exciting-chandrasekhar-v3zq5?file=/src/App.js

We have work arounds, but would it be possible to completely ignore a child (so don't wrap it with a container) if it's falsy?

Unhandled Runtime Error
Error: Cannot read properties of undefined (reading 'prototype')

Call Stack
prototype
node_modules\react-responsive-masonry\lib\Masonry\index.js (14:94)
_inheritsLoose
node_modules\react-responsive-masonry\lib\Masonry\index.js (19:2)
_react
node_modules\react-responsive-masonry\lib\Masonry\index.js (86:2)
(rsc)/./node_modules/react-responsive-masonry/lib/Masonry/index.js
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/vendor-chunks/react-responsive-masonry.js (20:1)
webpack_require
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43)
require
node_modules\react-responsive-masonry\lib\index.js (6:38)
(rsc)/./node_modules/react-responsive-masonry/lib/index.js
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/vendor-chunks/react-responsive-masonry.js (40:1)
webpack_require
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./src/app/gallery/[slug]/components/MasonaryGallery.tsx (9:82)
(rsc)/./src/app/gallery/[slug]/components/MasonaryGallery.tsx
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/app/gallery/[slug]/page.js (294:1)
webpack_require
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43)
eval
webpack-internal:///(rsc)/./src/app/gallery/[slug]/page.tsx (13:85)
(rsc)/./src/app/gallery/[slug]/page.tsx
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/app/gallery/[slug]/page.js (305:1)
Function.webpack_require
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/.next/server/webpack-runtime.js (33:43)
async ek
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (11:455662)
async tH
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:11134)
async
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183)
async tH
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950)
async
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183)
async tH
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950)
async
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:13183)
async tH
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (13:12950)
async
file:///C:/Users/amank/OneDrive/Desktop/work-projects/delexis/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js

I had an issue when using overflow: hidden deeply nested inside the masonry structure, causing one column to grow wider than the others. Adding min-width: 0; to the column styles fixed this, as explained in this article:
https://css-tricks.com/flexbox-truncated-text/

Would it be an idea to add this by default? I don't think it has any side effects and might make things a bit more stable in this specific situation.

Thanks for the awesome component btw!

I'm using react-responsive-masonry with Next.js

"next": "^9.5.5",
"react": "^16.14.0",
"react-dom": "^16.14.0",

I get the following warning, and the columnsCount property doesn't seem to work.

Warning: React does not recognize the columnsCount prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase columnscount instead. If you accidentally passed it from a parent component, remove it from the DOM element.

the break points do not work even on demo https://xuopled.github.io/react-responsive-masonry/
using chrome Version 63.0.3239.84 (Official Build) (64-bit) and macOS Sierra

I see lots of available space in one column, but extra items are still added to another column

Here is my impl:

<ResponsiveMasonry
  columnsCountBreakPoints={{ 350: 1, 750: 2, 1100: 3 }}
>
  <Masonry>
    ...
  </Masonry>
</ResponsiveMasonry>

Thanks for putting this together, I just wanted to flag that sadly it does not work with next/image. I assumed this was due to lazy loading, but I have turned this off and everything renders, but the styles have everything set to height 0.

I did force all parents to be 100vh, and this was the outcome:

No idea if you want to action this in anyway, but thought I would flag it.

Long story short we have an array of div's with an useEffect that uses a Ref, divided into 4 columns using <ResponsiveMasonry />, but the first one doesn't work properly.

  const [isClamped, setIsClamped] = useState(false)
  const commentRef = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    if (commentRef.current?.scrollHeight! > commentRef.current?.clientHeight!) {
      setIsClamped(true)
    }
  }, [])

  const [isClamped, setIsClamped] = useState(false)
  const commentRef = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    setIsClamped(commentRef.current?.scrollHeight! > commentRef.current?.clientHeight!)
  }, [])

Both strategies should work, right? The ref starts as null, which doesn't set isClamped to true, but then it renders, updates the ref and changes isClamped to true. (In the second

Except it doesn't, only the three latter columns get re-rendered for some reason. When checking the profiler, it shows that it re-rendered because of hook 3 (hasMounted):

and that Masonry's columnCount prop also changed.

What actually happens is this (logging the result of that condition):

Using a hand-made masonry component fixes this problem without any changes to the component with the useEffect, so it's something in this lib.

In fact I was wrong when I said that the ref started as null, because it's defined from the get-go (when using this hand-made component):

columnsCountBreakPoints support listen dom's width

Hello,

Thank you for the package, it's very easy to use it.

I just noticed that at the bottom, it's not render as excepted.
There is space to allow the last block to move in the other column but it's not the case.

Someone know how to fix that please ?

(I found that the demo that the behavior is the same: https://cedricdelpoux.github.io/react-responsive-masonry/)

Hi,

I just upgraded to 2.1.1, which totally messed up the rendering of the masonry view with server-side rendering.

A simple list of images generates the following error:
Warning: Prop `src` did not match. Server: "/media/bmebe50w/employee1.png?anchor=center&mode=crop&width=600&height=0&upscale=false&rnd=132526063490330000" Client: "/media/ok0mqkfl/employee2.png?anchor=center&mode=crop&width=600&height=0&upscale=false&rnd=132548434243470000"

With the following code:

const getEmployeeElement = employee => <img src={employee.imageUrl} key={employee.id}></img>


return <ResponsiveMasonry columnsCountBreakPoints={columnBreakpoints}>
    <Masonry gutter="32px" className="employees-list">
        {employees && employees.map(employee => getEmployeeElement(employee))}
    </Masonry>
 </ResponsiveMasonry>

Not just props, it could be anything.
Similar issue: Expected server HTML to contain a matching <div> in <div>.

Downgrading to 2.1.0 fixed this issue.

The images are too large in 2 columns when first time loading the site, It will not calculate the browser size and set the number of columns.

@xuopled Hi Cedric!

Again, thanks for answering my emails. I was wondering if we can have a feature which loads more photos when a button is clicked (in contrast with infinite scrolling). The number of photos shown by default as well as the number of photos to be loaded should be customizable; considering different screen sizes (mobiles and desktop).

Thanks!! :)

display: flex;flex-direction: column;place-content: stretch flex-start;flex: 1 1 0%;/* width: 0px; */gap: 10px;

Removing width 0px; Fixed my issue. had to remove the width to fix this

useEffect(()=>{
        const data = document.querySelectorAll('div[style="display: flex; flex-direction: column; place-content: stretch flex-start; flex: 1 1 0%; width: 0px; gap: 10px;"');
        console.log(data)
        if(data){
            data.forEach((item)=>{
                (item as HTMLElement).setAttribute('style', 'display: flex; flex-direction: column; place-content: stretch flex-start; flex: 1 1 0%; width: 100%; gap: 10px;')
            })
        }
    },[document.querySelectorAll('div[style="display: flex; flex-direction: column; place-content: stretch flex-start; flex: 1 1 0%; width: 0px; gap: 10px;"')])

Hi

I would like to be able to set the HTML tag for the masonry to be ul or ol and the items to use li

Is this possible already? If so, how to? Otherwise, would you mind adding this feature?

Thanks

How can we append additional images loaded with pagination from some kind of API calls?

Is there a way we can make a single child horizontally center aligned?

How to add video in same images gallery by react masonry

Let's say I want one of the children to use only 30% of the screen width, and the other to use 70%, or that I use 12 columns and want one of the child to use 4 columns while the other uses 8. Is there a way to do that?

Case: The elements inside the masonry create big gaps between each other vertically making the page look broken.
Reason: flex value of the display property

An easy fix for this is to target the inner DIV inside the masonry's main flexbox DIV via css and override the display: flex; property with display: block;. In this way, we don't tweak the library's files.

Probably this library isn't intended to support IE11 fully, but if anyone needs it to - that's the way to go.

Suggestion: Support use cases when image count is less than col. Right now they are shifted to the left leaving loads of white space on the right side.