1.0.2 • Published 4 years ago
react-responsive-gallery-custom v1.0.2
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.
yarn add react-responsive-galleryrender( , document.getElementById('root') );
<br/>
<h3>Width groups explanation</h3>
The Gallery has 6 different of width groups: <b>xs, s, m, l, xl, xxl .</b> <br/>
The Gallery renders again when the group changes.<br/>
You can change the group sizes by your preferences , the default group values are:<br/><br/>
- <b>xs:</b> From 0 to 420px<br/><br/>
- <b>s:</b> From 420px to 600px<br/><br/>
- <b>m:</b> From 600px to 768px<br/><br/>
- <b>l:</b> From 768px to 992px<br/><br/>
- <b>xl:</b> From 992px to 1200px<br/><br/>
- <b>xxl:</b> From 1200px to infinity<br/></br>
<i>*You don't need to specify 'xxl' in your 'screenWidthSizes' object because it's take your max 'xl' group value until infinity.</i>
<br/>
<h3>Gallery options</h3>
| Property | Type | Description | Default value | is Required
| :------------- | :------------- | :------------- | :------------- | :-------------
| images | Array | Array of images to display in the gallery. [Read more here](#images-options) | None | <b>Required</b>
| 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 <b>in %</b> by the width groups. | ``{xs: 100,s: 100,m: 100,l: 100,xl: 100,xxl:100}`` | Optional
| colsPadding | Object | Padding between images cols <b>in px</b> by the width groups. | ``{xs: 4,s: 4,m: 4,l: 4,xl: 4,xxl:4}`` | Optional
| imagesPaddingBottom | Object | Padding bottom between images <b>in px</b> 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
<br/><br/>
<h3>Images-Options</h3>
| Property | Type | Description | is Required
| :------------- | :------------- | :------------- | :-------------
| src | String | Image source url | <b>Required</b>
| 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
<br/>
<h3>Using Lightbox </h3>
You can use lightbox when clicking on one of the images that display on the gallery.
For the lightbox component library we use the <a target="_blank" href="https://www.npmjs.com/package/react-image-lightbox">react-image-lightbox library</a>.<br/>
You can sent the props from this library and to send them as prop to library called <b>'lightBoxAdditionalProps'</b>.
If you want to pass image caption and title you can pass that via the img props.
<br/><br/>
<h3>Author</h4>
<a target="_blank" href="https://github.com/OriAmir">Ori Amir</a>
<br/>
<h3>Bugs and Feedback</h4>
For bugs, questions and discussions please use the <a href="https://github.com/OriAmir/React-Responsive-Gallery/issues" target="_blank">Github Issues.</a>
<br/>
<h3>License</h4>
React Responsive Gallery is free to use for personal and commercial projects under the MIT License.