dantrain / react-stonecutter

Animated grid layout component for React

Home Page:http://dantrain.github.io/react-stonecutter

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Pinterest-Like when height unknown

ComputerCarl opened this issue · comments

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>
    )
  }
}
commented

Nevermind.. found issue #24