See on NPM   

See on Storybook   

A lightweight React responsive masonry component to display images. Built with CSS Flexbox:

• Supports row direction layout
• Configurable for different screen sizes
• Responsive
• Combined with a lightbox to display each image

:bulb: The word ikusi from the package name react-ikusi means see in Basque language. Click here for more information.

Getting started

You can download react-ikusi from the NPM registry via npm or yarn

yarn add react-ikusi
npm install react-ikusi --save

Demo

See react-ikusi Storybook

Example

Customizable configurations for different screen sizes | | | | ---------------------------------------------------------------------------------- | :------------------------------------------------------------------------------: | | | |

Usage

Here's the minimal setup example:

const photos = [
    {
        src: 'http://example.com/example/img1.jpg',
        width: 4,
        height: 3,
    },
    {
        src: 'http://example.com/example/img2.jpg',
        width: 1,
        height: 1,
    },
];

'https://live.staticflickr.com/65535/49595136583_f326bc8ef5_o.jpg',
    'https://live.staticflickr.com/65535/49595636006_ce5a2e029a_o.jpg',
    'https://live.staticflickr.com/65535/49595635976_7d941dac9e_o.jpg',
    'https://live.staticflickr.com/65535/49595136513_235b10c43e_o.jpg',
    'https://live.staticflickr.com/65535/49595136473_eb70b9a091_o.png';

import Gallery from 'react-ikusi';
<Gallery photos={photos} />;

Props

Photo

| Name | Description | Type | Required | | ------ | ------------------------------------------------------------- | ------ | -------- | | id | Unique identifier of the photo | string | true | | src | Url source of the original photo | string | true | | width | Original width of the photo in pixels | number | true | | height | Original height of the photo in pixels | number | true | | bigSrc | Url source of the photo in big size (for Lightbox displaying) | string | false |

Configuration

It is an array which may contain multiple elements for different screen sizes.

It determines the number of elements to be displayed per row and their margin.

| Name | Description | Type | Required | | -------- | ------------------------------------------------ | ------ | -------- | | cols | Number of elements per row | number | true | | margin | Space around each element of the Gallery (px) | number | true | | minWidth | Minimum width for the current configuration (px) | number | false | | maxWidth | Maximum width for the current configuration (px) | number | false |

An example of Gallery layout :