dantrain / react-stonecutter

Animated grid layout component for React
http://dantrain.github.io/react-stonecutter
MIT License
1.21k stars 72 forks source link

Pinterest-Like when height unknown #35

Closed ComputerCarl closed 6 years ago

ComputerCarl commented 6 years ago

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 6 years ago

Nevermind.. found issue #24