react-ikusi

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

💡 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 :