Skip to content
CodeSweetly Logo CodeSweetly Logo CodeSweetly
Blog
Latest: Publish JavaScript Packages to NPM Like a Pro!

React Image Grid Gallery v3.1.0 Release

React Image Grid Gallery version 3.1.0 is out! 🥳

Notable Changes

  • Thumbnails: Preview images at the bottom of the lightbox.
  • Image captions: Show the lightbox image’s description.
  • Lazy loading: Speed up initial page load and reduce network usage by deferring the loading of non-blocking (non-critical) images.
  • Resolution switching: Save bandwidth by giving the browser hints about the appropriate lightbox image resolution based on the user’s screen width.

Updated / New Props

PropsTypeDefaultDescription
imagesInfoArrayarrayundefined

(Required) An array of objects containing the following properties:

  • id: (Required - string or number) Each image’s unique identifying key.
  • alt: (Required - string) The image’s alternative text.
  • caption: (Optional - string) The image’s description.
  • src: (Required - string) The image’s default URL.
  • gridSrc: (Optional - string) The preferred grid image’s URL.
  • thumbSrc: (Optional - string) The preferred thumbnail image’s URL.
  • srcSet: (Optional - string) The set of images’ URLs and sizes for resolution switching.
  • mediaSizes: (Optional - string) The media conditions and image sizes that hint the browser on the specific srcSet to display when a media condition is true.
thumbnailBorderstring"3px solid #fff"(Optional) The thumbnail’s border style.
lazybooleantrue(Optional) Specify whether to lazy load images.
lazyFromIndexnumber6(Optional) The image’s index to begin the grid’s lazy loading. Tip: Use a negative number to lazy load all the images.
customStylesImageGalleryStylesType{}

(Optional) Custom styles to override the following element’s default styles:

  • Gallery container: galleryContainerStyle
  • Gallery image button: imageBtnStyle
  • Gallery image container: imageContainerStyle
  • Gallery image element: imageStyle
  • Gallery image caption: imageCaptionStyle
  • Modal container: modalContainerStyle
  • Modal slide number: modalSlideNumberStyle
  • Modal toolbar: modalToolbarStyle
  • Modal toolbar button: modalToolbarBtnStyle
  • Modal slideshow section: modalSlideShowSectionStyle
  • Modal thumbnail section: modalThumbnailSectionStyle
  • Modal thumbnail images container: modalThumbImgsPodStyle
  • Modal image element: modalImageStyle
  • Modal slide button: modalSlideBtnStyle
Terminal
npm install react-image-grid-gallery@latest

Alternatively, you can use Yarn or pnpm like so:

Yarn Installation
yarn upgrade react-image-grid-gallery --latest
PNPM Installation
pnpm update react-image-grid-gallery --latest

See the complete project-based guide to learn how to add the ImageGallery package to your React applications. You can use the library with Vite, NextJS, Remix, or any other React app.

Support CodeSweetly