React-justified-layout-ts NPM

A TypeScript component similar to Flickr's justified layout.

Usage

Add the TSJustifiedLayout component to your code with the following props:

layoutItems: number[]; - An array of aspect ratios for the images you are adding to the grid
itemSpacing?: number; - The amount of spacing between each image, in pixels. (Default: 10)
rowSpacing?: number; - The amount of spacing between each row, in pixels. (Default: 10)
targetRowHeight?: number; - The target row height for a row, in pixels. (Default: 320)
targetRowHeightTolerance?: number; - The amount the row height could deviate from the target row height, as a percent. (Default: .25)
width: number; - The width of the container. I would use something like react-use-measure if you're trying to make it dynamically take up the size of the parent container.
children: any[]; - The children elements that makes up the grid.
showWidows?: boolean; - If the last row should be shown. (Default: true)

Example Usage

<TSJustifiedLayout width={width}
    layoutItems={imagesOnPage.map(value => ({
       dimensions: value.aspectRatio || 1
    }))}>
        {imagesOnPage.map(value => <img
            src={value.src}
            alt={value.alt}
        />)}
</TSJustifiedLayout>