Pinterest-Like when height unknown
ComputerCarl opened this issue · 1 comments
ComputerCarl commented
I am attemptiong to render a Pinterest-type board, but am receiving the following error;
Error: Each child must have an "itemHeight" prop or an "itemRect.height" prop.
I will be rendering Semantic UI Card
components with various headers and images, so I do not know the size of the rendered components.
I have demonstrated this below with cats instead of cards;
import React, { Component } from 'react';
import { CSSGrid, layout, measureItems } from 'react-stonecutter';
import uuid from 'uuid';
const Grid = measureItems(CSSGrid);
export default class extends Component {
render() {
return (
<CSSGrid
component="ul"
columns={5}
columnWidth={290}
gutterWidth={5}
gutterHeight={5}
layout={layout.pinterest}
duration={800}
easing="ease-out"
>
<div id="cats">
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
<img width={290} src={"http://thecatapi.com/api/images/get?format=src&type=jpg&rnd=" + uuid.v4() } />
</div>
</CSSGrid>
)
}
}
ComputerCarl commented
Nevermind.. found issue #24