Nominating Presidential Muppets

    react-responsive-gallery-custom

    1.0.2 • Public • Published

    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.

    Getting started

     npm install react-responsive-gallery
    

    or

     yarn add react-responsive-gallery
    

    DEMO

    Try out the live gallery demo . (it's take few seconds until app is loading)
    * Some of the gallery features are not available in the live demo : cols padding , imagesStyle and images order(s,m,l).



    Basic using example

    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')
          );
    

    Width groups explanation

    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.


    Gallery options

    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



    Images-Options

    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

    Using Lightbox

    You can use lightbox when clicking on one of the images that display on the gallery. For the lightbox component library we use the react-image-lightbox library.
    You can sent the props from this library and to send them as prop to library called 'lightBoxAdditionalProps'. If you want to pass image caption and title you can pass that via the img props.



    Author Ori Amir

    Bugs and Feedback For bugs, questions and discussions please use the Github Issues.

    License React Responsive Gallery is free to use for personal and commercial projects under the MIT License.

    Install

    npm i react-responsive-gallery-custom

    DownloadsWeekly Downloads

    8

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    316 kB

    Total Files

    16

    Last publish

    Collaborators

    • phlex89