cedricdelpoux / react-responsive-masonry Goto Github PK
View Code? Open in Web Editor NEWReact responsive masonry component built with css flexbox
Home Page: https://cedricdelpoux.github.io/react-responsive-masonry/
License: MIT License
React responsive masonry component built with css flexbox
Home Page: https://cedricdelpoux.github.io/react-responsive-masonry/
License: MIT License
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):
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
Is there a way we can make a single child horizontally center aligned?
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?
if we can take option for user
alight item - start, end, center
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.
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.
How to add video in same images gallery by react masonry
The library has been very useful to me however I couldn't further tweak how the columns would behave because there is no way, as far as I know, for me to change each column's assigned inline styles.
a column's inline styles:
<div style="display: flex; flex-direction: column; place-content: stretch flex-start; flex: 1 1 0%; width: 0px; gap: 0px;"></div>
Is there a workaround to changing these inline styles? It would be useful if there were a way to change how each column behaved.
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]
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...
columnsCountBreakPoints support listen dom's width
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
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
Build is failing with the recent updated version - version - 2.1.2
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.
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
This package doesn't seem to work with the most recent Next JS 14 version even in a client component. Just loading the default code brings up these errors in the console:
Internal error: ReferenceError: window is not defined
at useWindowWidth (../node_modules/react-responsive-masonry/es/ResponsiveMasonry/index.js:28:68)
at MasonryResponsive (../node_modules/react-responsive-masonry/es/ResponsiveMasonry/index.js:60:21)
@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;"')])
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 lowercasecolumnscount
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
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/)
how to fix 'Image elements do not have explicit width and height' in pageSpeed.
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?
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.
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.
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.
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!
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?
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.
Its important to expose the Masonry component to a Ref
for it to be used in multiple cases..
for example be wrapped in a FramerMotion
component for example.
I installed as per the docs and I set in a component within a nextjs project.
Expect behavior:
The component works as expected.
Actual behavior:
I get this error
⨯ TypeError: Cannot set property ResponsiveMasonry of #<Object> which has only a getter
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.
So, I get this warning when giving gutter as number
Warning: Failed prop type: Invalid prop
gutterof type
numbersupplied to
Masonry2, expected
string.
But the gutter value takes effect only when its number and not a string.
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
How can we append additional images loaded with pagination from some kind of API calls?
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?
It relies on React hook componentDidMount
and that is never being called on server.
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.
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!
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.