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:

import Gallery from 'react-ikusi';

const photos = [
    {
        id: 'id-11111',
        title: 'Example image 1',
        src: 'http://example.com/example/img1.jpg',
        width: 4,
        height: 3,
    },
    {
        id: 'id-0033',
        title: 'Example image 2',
        src: 'http://example.com/example/img2.jpg',
        width: 1,
        height: 1,
    },
];


<Gallery photos={photos} />;

With additional props

const configurations = [
    { maxWidth: 340, cols: 2, margin: 1 },
    { maxWidth: 1024, cols: 3, margin: 1 },
    { minWidth: 1025, cols: 5, margin: 2 },
  ];

const handleClick: (photo) => {
    // do something...
}

const lightboxProps = {
    isEnabled: true,
    onClose?: () => {
        // do something...
    },
    onNext?: (photo) => {
        // do something...
    },     
    onPrev?: (photo) => {
        // do something...
    }
};

<Gallery photos={photos} configurations={configurations} onClickPhoto={handleClick} lightboxProps={lightboxProps} />;

Props

Gallery

| Name | Description | Type | Required | | -------------- | -------------------------------------------------------------------------- | -------------------- | -------- | | photos | An array of photos to render | PhotoProps[] | true | | configurations | Configurations to use for different screen sizes | ConfigurationProps[] | true | | onClickPhoto | Click photo handler | function | false | | lightboxProps | Props for lightbox rendering | LightboxProps | false | | withLightbox | Used to enable Lightbox rendering. @deprecated: Use lightboxProps instead | boolean | false |

PhotoProps

| Name | Description | Type | Required | | ------ | ------------------------------------------------------------- | ------ | -------- | | id | Unique identifier of the photo | string | true | | src | Url source of the photo | string | true | | title | Title of the photo | string | false | | 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 |

ConfigurationProps

It contains data for photo rendering in 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 |

LightboxProps

Additional props for lightbox rendering.

| Name | Description | Type | Required | | --------- | --------------------------------------- | -------- | -------- | | isEnabled | Whether lightbox is present in Gallery | boolean | true | | onClose | Close lightbox handler | function | false | | onPrev | Click on previous button handler | function | false | | onNext | Click on previous button handler | function | false |

An example of Gallery layout :