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:

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 :