Preview

Install

npm install react-matrix-gallery
// or
yarn add react-matrix-gallery

Use

import Gallery from 'react-matrix-gallery'
...
<Gallery>
    <img src="https://source.unsplash.com/1500x1700"/>
    <img src="https://source.unsplash.com/1501x1700"/>
    <img src="https://source.unsplash.com/1500x1701"/>
</Gallery>

Note: you should pass HTML/React elements as children, so you can choose whatever elements you want.

Available props

Prop name	Explanation	type
maxItems	Maximum items that can be inside component (default is 12)	Number
layout	Layout scheme (see below)	Array

Note if you pass more than maxItems number of items you'll see the counter on the last element.

Generate custom layout

You can define your custom layout scheme of elements as a matrix. Examples:

// 1 row: 2 elements
const layout1 = [
      // generate 1 row
      [1/2, 1/2], // generate 2 items (each image takes 1/2 of container width)
    ];
    
// 1 row: 3 elements with different width
const layout2 = [
      // generate 1 row
      [1/2, 1/4, 1/4], // generate 3 items
    ];

Result of layout2 (First image takes 50%, rest are 25%):

Example of 2 rows:

const layout3 = [
      // generate 2 rows
      [1/4, 1/4, 1/4, 1/4], // generate 4 items (identical width)
      [1/4, 1/4, 1/2], // generate 3 items (different width)
    ];

Result of layout3:

Then you can define your custom layout:

<Gallery layout={layout}>
    {items}
</Gallery>