react-ikusi
TypeScript icon, indicating that this package has built-in type declarations

3.1.3 • Public • Published

See on NPM   See on NPM

See on Storybook   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

example example

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 :

layout layout

layout layout

Package Sidebar

Install

npm i react-ikusi

Weekly Downloads

26

Version

3.1.3

License

ISC

Unpacked Size

329 kB

Total Files

41

Last publish

Collaborators

  • anediaz