react-ikusi

React photo displaying component library

Usage no npm install needed!

<script type="module">
  import reactIkusi from 'https://cdn.skypack.dev/react-ikusi';
</script>

README

React photo displaying component library

  • Creates a masonry for image displaying
  • 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.

Take a look to the Storybook

Preview

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

Installation

npm install react-ikusi

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} />;

API Documentation

Details of props 'photos'

Name Description Type Required
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


Details of props 'configurations'

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 exemple of Gallery's layout :

layout layout

layout layout