Stack Overflow
Stack Overflow

Questions tagged [react-masonry]

14 questions
4
votes
0 answers

Create a masonry with bricks.js and react

Code Situation I have a simple react app setup. The home component should be a image gallery with a masonry layout. I found this library: Bricks.js I load the data (name, date, url to image) of the items from my api with fetch. Here are some parts…
Colin
  • 1,112
  • 1
  • 16
  • 27
4
votes
2 answers

Reload react-masonry-component manually

Used React Masonry Plugin for my alignment of cards https://github.com/eiriklv/react-masonry-component Problem is I have expandable component in cards which increases the height of the card and masonry layout gets distorted. Plugin realigns if…
Ankur Aggarwal
  • 2,993
  • 5
  • 30
  • 56
3
votes
1 answer

How to make responsive image grid using react-virtualize

I am trying to render the responsive image grid, which might have images of different sizes. It sounds like the Masonry component is good fit for this case, but not sure that I am able to use this example in my application? It looks fully coupled to…
nowiko
  • 2,507
  • 6
  • 38
  • 82
3
votes
2 answers

Elements are in wrong position on a 're-render' caused by unfiltering a filtered array

I am using this react masonry component I am displaying my masonry tiles from a filtered array. var myFilteredArray = myArray.filter( (tile) => this.props.filter.indexOf(tile.tag) > -1 ) var tiles = myFilteredArray.map( (tile) => ) Where…
Terence Chow
  • 10,755
  • 24
  • 78
  • 141
1
vote
1 answer

Algorithm to take explicit heights of images and lay them out in optimally compact "Masonry"-style layout

I am using react-masonry-css to lay out some images in a Masonry-like layout, but it is just putting the same number of images in each column basically, and it ends up having large discrepancies in the amount of space left at the bottom of each…
Lance
  • 75,200
  • 93
  • 289
  • 503
1
vote
1 answer

Set individual custom column width with react-masonry

We can use react-masonry to generate the grid as outlined in the documentation: https://mui.com/material-ui/react-masonry/ This will however give that the column has equal widths. E.g. in case of 3 columns we have 33% for each, for 2 columns 50%…
WJA
  • 6,676
  • 16
  • 85
  • 152
1
vote
2 answers

React Masonry items alignment issue

I am using react masonry library: https://www.npmjs.com/package/react-masonry-component I have added three items with different width/height: image import React from 'react'; import Masonry from 'react-masonry-component'; const gridItems =…
user10832274
1
vote
1 answer

How to use Masonry.js and React.js?

I'm trying to integrate masonry.js in react.js and I'm having design problem. Should I have all masonry blocks in one root react component like how it's done in react-masonry-component this.props.elements.map(function(element){ …
user794783
  • 3,619
  • 7
  • 36
  • 58
0
votes
2 answers

Blank spaces inside Masonry column - React.JS, react-masonry-css and SCSS

I'm doing a fetch list that return random card sizes with 2 widths: Horizontal (Larger) Default (Horizontal / 2) And I'm getting blank spaces in masonry columns: Problem Image I'm working with react-masonry-css and with this styles: .masonry-grid…
im-victor-mendez
  • 1
  • 1
0
votes
0 answers

How to fetch multiple API using typescript in reactjs?

I have a list of urls, I want to fetch all of them and to return the images found in all these APIs so I can render it in react component using react-responsive-masonry. I have made my function in javascript but I am not sure how to write it in…
Menna T-Allah Magdy
  • 27
  • 7
0
votes
2 answers

How to loop images in MasonryList on React-Native

I have a array with photos Url in it. How can I show this array in masonryList ?? I will retrieve the photo source from the database images = [ { images: { uri: …
Baran Güngör
  • 13
  • 6
0
votes
1 answer

Inner element does not extends parent height element

Why green element does not extends blue elements heights? I cant set this to work properly,is there any solution to make deeper element to extend container?Yellow must have fixed height its is a masonry grid in real life example and i dont know why…
Jan Ciołek
  • 1,796
  • 3
  • 17
  • 32
0
votes
0 answers

In react-masonry, how to get vertical spacing? margin-bottom is not working for me

The 'gutter' property works fine, but as you can see in columns 2 and 3, margin-bottom styles don't have any effect. All the divs are position: absolute. What to do? I tried faking the effect with thick borders, color: transparent, but not working…
dwilbank
  • 2,470
  • 2
  • 26
  • 37
0
votes
1 answer

React Masonry Plugin: TypeError: Cannot read property 'bool' of undefined

I get an error when trying to use the react-masonry-component in an isomorphic react app. Does anyone have any insight into what could be causing this error? I am using es6, webpack and babel in this build. Here is the error: TypeError: Cannot…
psvj
  • 8,280
  • 8
  • 30
  • 44