React-Responsive-Gallery - Responsive Gallery for react application.

Main features

• Custom for every screen width size.
• Dynamic properties for every screen width size.
• Simple to use.
• Work with lightbox for image display.

 npm install react-responsive-gallery

or

 yarn add react-responsive-gallery

import React from 'react';
import { render } from 'react-dom';
import ResponsiveGallery from 'react-responsive-gallery-custom';

const images=[
          {
            src: 'https://cdn.pixabay.com/photo/2017/01/14/12/59/iceland-1979445_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2019/06/12/15/07/cat-4269479_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2016/12/04/21/58/rabbit-1882699_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2014/07/08/12/36/bird-386725_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2015/10/12/15/46/fallow-deer-984573_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2014/10/01/10/44/hedgehog-468228_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2013/09/22/15/29/prairie-dog-184974_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2018/03/31/06/31/dog-3277416_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2016/12/13/05/15/puppy-1903313_960_720.jpg'
          },
          {
            src: 'https://cdn.pixabay.com/photo/2019/03/09/17/30/horse-4044547_960_720.jpg'
          }
        ];
    
render(
      <ResponsiveGallery images={images}/>,
      document.getElementById('root')
      );

The Gallery has 6 different of width groups: xs, s, m, l, xl, xxl . The Gallery renders again when the group changes. You can change the group sizes by your preferences , the default group values are:

• xs: From 0 to 420px
• s: From 420px to 600px
• m: From 600px to 768px
• l: From 768px to 992px
• xl: From 992px to 1200px
• xxl: From 1200px to infinity

*You don't need to specify 'xxl' in your 'screenWidthSizes' object because it's take your max 'xl' group value until infinity.

| Property | Type | Description | Default value | is Required | :------------- | :------------- | :------------- | :------------- | :------------- | images | Array | Array of images to display in the gallery. Read more here | None | Required | screenWidthSizes | Object | Gallery groups width break points. | {xs: 420,s: 600,m: 768,l: 992,xl: 1200} | Optional | numOfImagesPerRow | Object | Number of images for row by the width groups. | {xs: 1,s: 2,m: 3,l: 3,xl: 4 xxl:5} | Optinal | imageMaxWidth | Object | Image max width in % by the width groups. | {xs: 100,s: 100,m: 100,l: 100,xl: 100,xxl:100} | Optional | colsPadding | Object | Padding between images cols in px by the width groups. | {xs: 4,s: 4,m: 4,l: 4,xl: 4,xxl:4} | Optional | imagesPaddingBottom | Object | Padding bottom between images in px by the width groups. | {xs: 4,s: 4,m: 4,l: 4,xl: 4,xxl:4} | Optional | imagesStyle | Object / String | Style that will apply on all the images on gallery | None | Optional | useLightBox | Boolean | Use lightbox when clicking on image | false | Optional | lightBoxAdditionalProps | object | Additional props for the lightbox component. Read more here | false | Optional

| Property | Type | Description | is Required | :------------- | :------------- | :------------- | :------------- | src | String | Image source url | Required | orderS | Number | Image order in small group sizes(xs, s) | Optional | orderM | Number| Image order in meduim group sizes (m,l) |Optional | orderL | Number | Image order in large group sizes(xl,xxl) | Optional | imgClassName | Object / String | Image style object/string for styling specific image | Optional | lightboxCaption | String | Lightbox image caption | Optional | lightboxTitle | String | Lightbox image title | Optional