additional props

[dzienisz]

why you can't have additional props?

limiting props to only specified is very limiting i need to use other project sorry :(

[josephj]

Hey @dzienisz,

Can you give me more details? You can always use the render props to have your own structures and props. https://github.com/josephj/react-justified-grid#advanced

Or are you talking about something else?

[dzienisz]

Like I want to replace images with videos or add additional description or other data.

[josephj]

@dzienisz I feel it's totally fine. This lib only helps you to do the dimension calculation. I do have the same purpose as you mentioned here.

import React, {Component, Fragement} from 'react';
import Link from 'react-router-dom';
import JustifiedGrid from 'react-justified-grid';

class MyImageGallery extends Component {  
  render () {
    const medias = [{
        src: 'https://a.com/b.mp4',
        width: 320,
        height: 400,
        linkUrl: 'https://hello.com',
        myData: 1,
        myData: 2
    }];

    return (
      <JustifiedGrid images={medias} rows={3} maxRowHeight={64}>
        {processedMedias => {
          return (
            <Fragement>
              {processedMedias.map(media => {
                const { src, width, height, left, top, originalData } = media;
                return (
                  <Link to={originalData.linkUrl}>
                    <Meida src={src} width={width} height={height} data1={originalData.myData1} data2={originalData.myData2} />
                  </Link>
                );
              })}
            </Fragement>
          );
        }}
      </JustifiedGrid>
    )
  }
}

[dzienisz]

ok, now I understand how to prepare medias object.

I created

const medias = [{
        src: 'https://a.com/b.mp4',
        width: 320,
        height: 400,
        linkUrl: 'https://hello.com',
        originalData: {
                myData: 1,
                myData: 2
        }
    }];

before.

It was't obvious reading documentation

[josephj]

@dzienisz

Just remind that you don't need to wrap another originalData. 😄
https://github.com/josephj/react-justified-grid/blob/master/src/utils.ts#L107