# react-responsive-gallery-custom > React responsive gallery Latest version **1.0.2** (published 2020-11-02) · MIT license · 0 weekly downloads ## Install ```sh npm install react-responsive-gallery-custom pnpm add react-responsive-gallery-custom yarn add react-responsive-gallery-custom bun add react-responsive-gallery-custom ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2020-11-02 | | First published | 2020-11-02 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 4 | | Unpacked size | 308.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Stefano Tedeschi | | Maintainers | phlex89 | | Keywords | react, react-gallery, react-responsive-gallery | ## Links - npm: https://www.npmjs.com/package/react-responsive-gallery-custom - Repository: https://github.com/phlex89/React-Responsive-Gallery - Homepage: https://github.com/phlex89/React-Responsive-Gallery#readme - Issues: https://github.com/phlex89/React-Responsive-Gallery/issues - npm.io page: https://npm.io/package/react-responsive-gallery-custom ## Dependencies (4) - [shortid](https://npm.io/package/shortid.md) ^2.2.15 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [styled-components](https://npm.io/package/styled-components.md) ^5.0.1 - [react-image-lightbox](https://npm.io/package/react-image-lightbox.md) ^5.1.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.0.2 (latest) — 2020-11-02 - 1.0.1 — 2020-11-02 - 1.0.0 — 2020-11-02 ## README # 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( , 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](#images-options) | 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](#images-options) | 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. --- _Source: https://npm.io/package/react-responsive-gallery-custom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._