├── .github └── workflows │ └── commitlint.yml ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .release-it.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── commitlint.config.ts ├── jest.config.ts ├── package-lock.json ├── package.json ├── src ├── ImageGallery.test.tsx ├── ImageGallery.tsx ├── ImageGallery.types.tsx ├── ImageGalleryStyles.ts └── jestCryptoSetup.ts └── tsconfig.json /.github/workflows/commitlint.yml: -------------------------------------------------------------------------------- 1 | name: Lint Commit Messages 2 | on: [pull_request, push] 3 | 4 | jobs: 5 | commitlint: 6 | runs-on: ubuntu-latest 7 | steps: 8 | - uses: actions/checkout@v3 9 | with: 10 | fetch-depth: 0 11 | - uses: wagoid/commitlint-github-action@v5 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /dist 6 | 7 | # Generated files 8 | .cache-loader 9 | 10 | # Misc 11 | .DS_Store 12 | .env 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | 22 | # Local Netlify folder 23 | .netlify -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npx --no -- commitlint --edit ${1} 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | npm test 2 | -------------------------------------------------------------------------------- /.release-it.json: -------------------------------------------------------------------------------- 1 | { 2 | "git": { 3 | "commitMessage": "chore: Release v${version}" 4 | }, 5 | "github": { 6 | "release": true, 7 | "tokenRef": "RELEASE_IT_GITHUB_TOKEN" 8 | }, 9 | "plugins": { 10 | "@release-it/conventional-changelog": { 11 | "infile": "CHANGELOG.md", 12 | "header": "# Changelog", 13 | "preset": { 14 | "name": "conventionalcommits", 15 | "types": [ 16 | { "type": "build", "section": "🧱 Dependency" }, 17 | { "type": "chore", "section": "🏠 Chores" }, 18 | { "type": "docs", "section": "📝 Documentation" }, 19 | { "type": "feat", "section": "🚀 New Feature" }, 20 | { "type": "fix", "section": "🐛 Bug Fix" }, 21 | { "type": "refactor", "section": "🔄️ Code Refactoring" }, 22 | { "type": "style", "section": "💅 Styling and Formatting" }, 23 | { "type": "test", "section": "🧪 Code Testing" } 24 | ] 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## 3.1.2 (2025-02-18) 4 | 5 | * fix: Use an inner container to control the thumbnails' horizontal alignment ([bd78749](https://github.com/codesweetly/react-image-grid-gallery/commit/bd78749)) 6 | 7 | ## 3.1.1 (2025-02-18) 8 | 9 | * style: Center thumbnails ([7a88d3f](https://github.com/codesweetly/react-image-grid-gallery/commit/7a88d3f)) 10 | 11 | ## 3.1.0 (2025-02-17) 12 | 13 | * docs: Add funding info ([0851b54](https://github.com/codesweetly/react-image-grid-gallery/commit/0851b54)) 14 | * docs: Indicate how to lazy load all the grid's images ([a718eff](https://github.com/codesweetly/react-image-grid-gallery/commit/a718eff)) 15 | * docs: Write about the latest features ([24e0da4](https://github.com/codesweetly/react-image-grid-gallery/commit/24e0da4)) 16 | * build: Bump dependencies ([696e205](https://github.com/codesweetly/react-image-grid-gallery/commit/696e205)) 17 | * refactor: Make lazy loading optional ([16abc60](https://github.com/codesweetly/react-image-grid-gallery/commit/16abc60)) 18 | * refactor: Make modal's image height dynamic ([d419e10](https://github.com/codesweetly/react-image-grid-gallery/commit/d419e10)) 19 | * refactor: Stop supporting undefined src ([dab460e](https://github.com/codesweetly/react-image-grid-gallery/commit/dab460e)) 20 | * feat: Activate an image by clicking its thumbnail ([2f0cbca](https://github.com/codesweetly/react-image-grid-gallery/commit/2f0cbca)) 21 | * feat: Allow using small images for gallery and thumbnail ([c20d319](https://github.com/codesweetly/react-image-grid-gallery/commit/c20d319)) 22 | * feat: Create modal thumbnail section ([dafa48d](https://github.com/codesweetly/react-image-grid-gallery/commit/dafa48d)) 23 | * feat: Create thumbnail images where the active image auto-scrolls into view ([75172d9](https://github.com/codesweetly/react-image-grid-gallery/commit/75172d9)) 24 | * feat: Display modal image's caption ([19d98d2](https://github.com/codesweetly/react-image-grid-gallery/commit/19d98d2)) 25 | * feat: Lazy load grid images from index 6 and above ([f4f0326](https://github.com/codesweetly/react-image-grid-gallery/commit/f4f0326)) 26 | * feat: Lazy load lightbox images ([b76a039](https://github.com/codesweetly/react-image-grid-gallery/commit/b76a039)) 27 | * feat: Make scrolling thumbnails to view keyboard-compatible ([f1fd230](https://github.com/codesweetly/react-image-grid-gallery/commit/f1fd230)) 28 | * feat: Make thumbnails optional ([c65cdac](https://github.com/codesweetly/react-image-grid-gallery/commit/c65cdac)) 29 | * feat: Support providing different image sizes for the grid, modal, and thumbnail ([f569ff9](https://github.com/codesweetly/react-image-grid-gallery/commit/f569ff9)) 30 | * feat: Support resolution switching ([44cfa02](https://github.com/codesweetly/react-image-grid-gallery/commit/44cfa02)) 31 | * fix: Re-implement clicking modal background to exit lightbox ([f8b9829](https://github.com/codesweetly/react-image-grid-gallery/commit/f8b9829)) 32 | 33 | ## 3.0.0 (2025-01-09) 34 | 35 | * build: Bump dependencies ([2e1692e](https://github.com/codesweetly/react-image-grid-gallery/commit/2e1692e)) 36 | * build: Bump typescript from v5.7.2 to v5.7.3 ([8811f95](https://github.com/codesweetly/react-image-grid-gallery/commit/8811f95)) 37 | * docs: Add features section ([e4dcb2a](https://github.com/codesweetly/react-image-grid-gallery/commit/e4dcb2a)) 38 | * docs: Add id property to imagesArray ([53816a5](https://github.com/codesweetly/react-image-grid-gallery/commit/53816a5)) 39 | * docs: Update customStyles' default value to an empty object ([d5a311a](https://github.com/codesweetly/react-image-grid-gallery/commit/d5a311a)) 40 | * docs: Update docusaurus note to reflect that crypto is no longer used by default ([d11c168](https://github.com/codesweetly/react-image-grid-gallery/commit/d11c168)) 41 | * style: Specify the gallery images' initial aspect ratio ([5b55263](https://github.com/codesweetly/react-image-grid-gallery/commit/5b55263)) 42 | * refactor: Apply suggestions from code review ([bc176a5](https://github.com/codesweetly/react-image-grid-gallery/commit/bc176a5)) 43 | * refactor: Create imageElementsArray from a function ([ac645e9](https://github.com/codesweetly/react-image-grid-gallery/commit/ac645e9)) 44 | * refactor: Use empty object as customStyles' default value to reflect the accepted data type ([83c6e09](https://github.com/codesweetly/react-image-grid-gallery/commit/83c6e09)) 45 | * Adding configurable styles, key for images, and visibility of captions ([effbbc4](https://github.com/codesweetly/react-image-grid-gallery/commit/effbbc4)) 46 | * feat!: Make an id field part of the required properties of the imagesInfoArray prop ([0614ed9](https://github.com/codesweetly/react-image-grid-gallery/commit/0614ed9)) 47 | * refactor!: Show error message if id property is missing in the imagesArray ([0c05380](https://github.com/codesweetly/react-image-grid-gallery/commit/0c05380)) 48 | * test: Customize image button's style ([5db32f6](https://github.com/codesweetly/react-image-grid-gallery/commit/5db32f6)) 49 | * fix: Change imagesrc's initial value from an empty string to undefined ([906d533](https://github.com/codesweetly/react-image-grid-gallery/commit/906d533)) 50 | * chore: Reconfigure husky ([7c34c74](https://github.com/codesweetly/react-image-grid-gallery/commit/7c34c74)) 51 | 52 | ## [2.1.4](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.1.3...v2.1.4) (2024-07-16) 53 | 54 | 55 | ### 🧱 Dependency 56 | 57 | * Update peerDependencies ([bf04ca3](https://github.com/codesweetly/react-image-grid-gallery/commit/bf04ca341b6fad5a576b072e54f746cf021af84f)) 58 | 59 | 60 | ### 🐛 Bug Fix 61 | 62 | * Open lightbox when keyboard enter key is pressed on image card ([8345b9e](https://github.com/codesweetly/react-image-grid-gallery/commit/8345b9e8a92bd102cbbf1abb85e669e222626aed)) 63 | 64 | 65 | ### 🔄️ Code Refactoring 66 | 67 | * Remove redundant code ([cdc5839](https://github.com/codesweetly/react-image-grid-gallery/commit/cdc58399500f2d99ed084a47472b38b2befd300a)) 68 | 69 | ## [2.1.3](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.1.2...v2.1.3) (2024-07-14) 70 | 71 | 72 | ### 🧱 Dependency 73 | 74 | * Update dev dependencies ([2e202bb](https://github.com/codesweetly/react-image-grid-gallery/commit/2e202bbd270aea3ecf7e17d1fa60f1c3a69bf959)) 75 | 76 | 77 | ### 🐛 Bug Fix 78 | 79 | * Prevent page scrolling when lightbox is active ([e0ee446](https://github.com/codesweetly/react-image-grid-gallery/commit/e0ee44630b451ba894a024a3ce306feb5a67d069)) 80 | * Resolve fullscreen button error while exiting with esc key ([6dae9d8](https://github.com/codesweetly/react-image-grid-gallery/commit/6dae9d80ef2b8eebe58b37212227910ddd2a77e7)) 81 | * Set focus on the lightbox on fullscreen change ([01aeaac](https://github.com/codesweetly/react-image-grid-gallery/commit/01aeaacd67e094525eb10da18893591ca5c04d9e)) 82 | 83 | 84 | ### 🔄️ Code Refactoring 85 | 86 | * Don't use useEffect and useState hooks to manage lightbox ([2446023](https://github.com/codesweetly/react-image-grid-gallery/commit/2446023c8dfa63e0981f620a8094ca8f2b7b6017)) 87 | * Remove figure's tabindex to improve accessibility ([5086c3a](https://github.com/codesweetly/react-image-grid-gallery/commit/5086c3aaf92b023c3c4864bad91b2eda849de024)) 88 | * Rename showModal to showLightBox ([8f99e8d](https://github.com/codesweetly/react-image-grid-gallery/commit/8f99e8d4df172a436137e57678121db13c75ed16)) 89 | * Use html dialog element to manage lightbox ([6c8f69f](https://github.com/codesweetly/react-image-grid-gallery/commit/6c8f69f5ba0b2cf66364b3bb6069995a3d8260bf)) 90 | * Use ref to access lightbox element ([99544ad](https://github.com/codesweetly/react-image-grid-gallery/commit/99544ad31e84451ef457bb225ac70ae987e17c9d)) 91 | 92 | 93 | ### 💅 Styling and Formatting 94 | 95 | * Remove modal toobar button's margins ([d1fd15d](https://github.com/codesweetly/react-image-grid-gallery/commit/d1fd15d18cc185620dc172cd48a07530e9c24f81)) 96 | 97 | ## [2.1.2](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.1.1...v2.1.2) (2024-04-29) 98 | 99 | 100 | ### 🐛 Bug Fix 101 | 102 | * Resolve images' undefined marigin-bottom ([3132ce4](https://github.com/codesweetly/react-image-grid-gallery/commit/3132ce46465d97e8f207eab4b887f06baccda919)) 103 | 104 | 105 | ### 💅 Styling and Formatting 106 | 107 | * Define modal's font color ([b3e61a5](https://github.com/codesweetly/react-image-grid-gallery/commit/b3e61a53109b336d0f5deacba6dbebddf9d7b3cb)) 108 | 109 | ## [2.1.1](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.1.0...v2.1.1) (2024-04-29) 110 | 111 | 112 | ### 🔄️ Code Refactoring 113 | 114 | * Delete redundant field ([3b48aaf](https://github.com/codesweetly/react-image-grid-gallery/commit/3b48aafb85726b6890adc090481f3a5865647dd2)) 115 | 116 | ## [2.1.0](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.0.1...v2.1.0) (2024-04-29) 117 | 118 | 119 | ### 🧱 Dependency 120 | 121 | * Bump dependencies ([aa64794](https://github.com/codesweetly/react-image-grid-gallery/commit/aa6479460dac151754434fc8e8074c3f988d934b)) 122 | * Bump packages ([a9f0d6d](https://github.com/codesweetly/react-image-grid-gallery/commit/a9f0d6dfc0bce4f3c154dd04f4df6074b8eec813)) 123 | * Drop fslightbox-react dependency ([ab275e5](https://github.com/codesweetly/react-image-grid-gallery/commit/ab275e565469f2aed100f8ff9c305f5b2bb273c0)) 124 | 125 | 126 | ### 🏠 Chores 127 | 128 | * Update fullscreen state when users exit fullscreen mode without using the modal's button ([390dca9](https://github.com/codesweetly/react-image-grid-gallery/commit/390dca92859546c65507593d3e7b7f5b1e102385)) 129 | * Update repo url ([709f562](https://github.com/codesweetly/react-image-grid-gallery/commit/709f562854bd855a56be1304ded01d910d885e84)) 130 | 131 | 132 | ### 📝 Documentation 133 | 134 | * Add references to the documentation on this keyword's types ([108e913](https://github.com/codesweetly/react-image-grid-gallery/commit/108e9130f05cb984347223103b67493dec1bd4cd)) 135 | * Inform users about the new columnCount prop ([fe4541a](https://github.com/codesweetly/react-image-grid-gallery/commit/fe4541a4856744367feea26abb111e4bf3a738b9)) 136 | * Notify docusaurus users how to resolve 'crypto not defined' error ([1356dca](https://github.com/codesweetly/react-image-grid-gallery/commit/1356dcac4d25b1be70b519a54f8555f477ba5963)) 137 | 138 | 139 | ### 🚀 New Feature 140 | 141 | * Allow changing of slides with the keyboard ([9d8bed2](https://github.com/codesweetly/react-image-grid-gallery/commit/9d8bed25464103a58e3f68121861c0a90c0d64f7)) 142 | * Allow showing lightbox at fullscreen ([df96394](https://github.com/codesweetly/react-image-grid-gallery/commit/df963949262a97b7dcf42804a6f712f6ace7a11e)) 143 | * Allow the lightbox to be closed with the escape key ([95f3e31](https://github.com/codesweetly/react-image-grid-gallery/commit/95f3e3114ee5a5192ef5f45dc9296158e90d7a7f)) 144 | * Auto focus on lightbox when activated ([0e0ea4c](https://github.com/codesweetly/react-image-grid-gallery/commit/0e0ea4c8284979b7d926c1b1ee5790ec32f7fb7e)) 145 | * Auto-focus on modal when at fullscreen ([3b38a1e](https://github.com/codesweetly/react-image-grid-gallery/commit/3b38a1e70f47a0fb650ea5c05a93b3f14cc05572)) 146 | * Auto-focus on modal when exiting fullscreen ([1b76d75](https://github.com/codesweetly/react-image-grid-gallery/commit/1b76d755160238064dacdd79ec6e2aad0e4be712)) 147 | * Close lightbox onclick of its background ([6c1fb78](https://github.com/codesweetly/react-image-grid-gallery/commit/6c1fb78ed95eb9900d308a9ff5e0dbaa0555d0bf)) 148 | * Close modal on click of the close button ([36c45c7](https://github.com/codesweetly/react-image-grid-gallery/commit/36c45c71a0f6d1c68a11960e07b94f81f1af50b9)) 149 | * Create pagination ([7e9114c](https://github.com/codesweetly/react-image-grid-gallery/commit/7e9114c2a452bed4ccadd702bfdbc3196ad140f2)) 150 | * Exit fullscreen when modal is off ([8daebd9](https://github.com/codesweetly/react-image-grid-gallery/commit/8daebd9836c29509b898a781dc711de943455c89)) 151 | * Make entering and exiting full screen mode keyboard accessible ([6a1c0f8](https://github.com/codesweetly/react-image-grid-gallery/commit/6a1c0f8c605f186bc020fca5f6b7fcb88d7b2f95)) 152 | * Make images in the gallery keyboard accessible ([4fa12b8](https://github.com/codesweetly/react-image-grid-gallery/commit/4fa12b8aeeaf3162025031469abd31c26639b42e)) 153 | * Prevent scrolling on page's body when modal is opened ([9808372](https://github.com/codesweetly/react-image-grid-gallery/commit/9808372b1f34161e685b774bb7ccec6e72987297)) 154 | * Provide the option to specify the exact number of columns in the gallery ([fb6bce7](https://github.com/codesweetly/react-image-grid-gallery/commit/fb6bce7966c518ca78934616cd672cf913cb3326)) 155 | * Show clicked image in modal's slideshow section ([64b0d1e](https://github.com/codesweetly/react-image-grid-gallery/commit/64b0d1ed84b00d2beeb85f50b7719259a9d2a3e7)) 156 | * Show lightbox's controls on mouse hover only ([9b36b3b](https://github.com/codesweetly/react-image-grid-gallery/commit/9b36b3b4b1b8b993f00e9d6280635d13b98be61b)) 157 | * Show lightbox's main container onclick of a page-thumbnail ([475d1bb](https://github.com/codesweetly/react-image-grid-gallery/commit/475d1bba54527f7916f2d5c083804cfcdb5b37f2)) 158 | * Transition the change in opacity ([a4246c5](https://github.com/codesweetly/react-image-grid-gallery/commit/a4246c54b9485cadf6e7fbe8004a541a6795d096)) 159 | * Transition the change in opacity ([c09bd6e](https://github.com/codesweetly/react-image-grid-gallery/commit/c09bd6edbc6cda880082c15827e1022ae0489dd4)) 160 | * Use arrows to change slides ([d15c345](https://github.com/codesweetly/react-image-grid-gallery/commit/d15c3454cd5831b8c3bae77e495973ebff94bd0c)) 161 | 162 | 163 | ### 🔄️ Code Refactoring 164 | 165 | * Allow keyword values ([03f17aa](https://github.com/codesweetly/react-image-grid-gallery/commit/03f17aa05237c4d98cf56d912996b35983e49068)) 166 | * Allow keyword values ([55b2ff3](https://github.com/codesweetly/react-image-grid-gallery/commit/55b2ff36d792e9402b00bdd99c6ebf82552ec788)) 167 | * Catch fullscreen api's errors ([c466edb](https://github.com/codesweetly/react-image-grid-gallery/commit/c466edb0fbb61a11d624f3676da9724dd1c3c173)) 168 | * Change class constructor to factory function for readability ([fb7c6b6](https://github.com/codesweetly/react-image-grid-gallery/commit/fb7c6b67efe7321d983c9ba539c49daa62088309)) 169 | * Create modal variable ([5e5db0a](https://github.com/codesweetly/react-image-grid-gallery/commit/5e5db0a5c321e4071009385f8d603ceb6791e58f)) 170 | * Hide html tag's scroll when modal is opened ([29da3fb](https://github.com/codesweetly/react-image-grid-gallery/commit/29da3fb4b7c1d09f8c407b19e746a0e07a4b8773)) 171 | * Isolate the toolbar and slide number from their container ([eb9edbb](https://github.com/codesweetly/react-image-grid-gallery/commit/eb9edbbc4f288bd66243249d05f1e49b660ab6a3)) 172 | * Make buttons accessible ([5c88555](https://github.com/codesweetly/react-image-grid-gallery/commit/5c885552da9b33c03f4f936fa4b9cbcab53ae0b9)) 173 | * Merge exitFullscreen function with enterFullscreen ([d167fd5](https://github.com/codesweetly/react-image-grid-gallery/commit/d167fd51f421ab6c71d3d3bb63bf2a0e80a13d37)) 174 | * Move the modal's main container's rulesets to the styles file ([2fd9f01](https://github.com/codesweetly/react-image-grid-gallery/commit/2fd9f01ce18c5fce982aa1db007ecd2177c7cd32)) 175 | * Rename modalMainContainerStyle to modalContainerStyle ([9a09bfd](https://github.com/codesweetly/react-image-grid-gallery/commit/9a09bfd41a98f16db5bc5675e631a7122f19e598)) 176 | * Replace html arrow entities with svg arrows ([31afd5d](https://github.com/codesweetly/react-image-grid-gallery/commit/31afd5d681ac8fe53b10bbd907e4db4b1fe4acf5)) 177 | * Replace if statement with the 'and' operator ([f2c73fd](https://github.com/codesweetly/react-image-grid-gallery/commit/f2c73fd9c1449189539a0c1e3d062378c83d36a3)) 178 | * Use img element to show the lightbox's images ([0fbaa2f](https://github.com/codesweetly/react-image-grid-gallery/commit/0fbaa2f284dc74c78c4ea7107a9c3decf0e65814)) 179 | 180 | 181 | ### 💅 Styling and Formatting 182 | 183 | * Absolutely position modal's nav ([b2365d7](https://github.com/codesweetly/react-image-grid-gallery/commit/b2365d73ac6ee76a422c799704eb8dfb2898f0ea)) 184 | * Add background color to slide number ([ed157d6](https://github.com/codesweetly/react-image-grid-gallery/commit/ed157d6dddaaa8f0d29a04c82d4b7fb40bf70dfc)) 185 | * Blur lightbox's background ([2c42673](https://github.com/codesweetly/react-image-grid-gallery/commit/2c4267326fd2f9660d49766cbbbf1416be8592dc)) 186 | * Center slideshow navigation arrows vertically ([d6ba9a5](https://github.com/codesweetly/react-image-grid-gallery/commit/d6ba9a5e87cca8e851500c3159e87aa185225120)) 187 | * Increase arrows' hit area ([703c660](https://github.com/codesweetly/react-image-grid-gallery/commit/703c6606551c87abc3d5e59a30c7a32eccf8682a)) 188 | * Make images mobile responsive ([bc9d0c3](https://github.com/codesweetly/react-image-grid-gallery/commit/bc9d0c380dcd93f5a528441274848b5379bd5d7d)) 189 | * Prevent selection of arrows ([b53bf66](https://github.com/codesweetly/react-image-grid-gallery/commit/b53bf669723e7d259e3e0a7bfc4445fe0b789907)) 190 | 191 | ## [2.0.1](https://github.com/codesweetly/react-image-grid-gallery/compare/v2.0.0...v2.0.1) (2024-01-03) 192 | 193 | 194 | ### 🐛 Bug Fix 195 | 196 | * Change image container's margin-bottom specificity ([ecf9f16](https://github.com/codesweetly/react-image-grid-gallery/commit/ecf9f1628bc5c09b065157f8f6eecbfa5fd53cb7)) 197 | 198 | ## [2.0.0](https://github.com/codesweetly/react-image-grid-gallery/compare/v1.0.3...v2.0.0) (2024-01-03) 199 | 200 | 201 | ### ⚠ BREAKING CHANGES 202 | 203 | * Rename imagesArray prop to imagesInfoArray 204 | * Rename imgArray prop to imagesArray 205 | * Users must now use named importation to add the package to their apps. 206 | 207 | Named importation provides better compatibility with node and babel-like tools. 208 | 209 | Ref: https://esbuild.github.io/content-types/#default-interop 210 | 211 | ### 🧱 Dependency 212 | 213 | * Bump @types/react ([2515713](https://github.com/codesweetly/react-image-grid-gallery/commit/2515713d69e221e4c6fded51badffa7229dc0d59)) 214 | * Bump packages ([3340792](https://github.com/codesweetly/react-image-grid-gallery/commit/3340792c20c6ad5128795885aaa93da57cdb2d91)) 215 | * Configure script for building es modules and commonjs compilations ([14a6251](https://github.com/codesweetly/react-image-grid-gallery/commit/14a62518ba0331b7068f34e558363d120be79a1a)) 216 | * Configure script for building es modules compilations ([390e63a](https://github.com/codesweetly/react-image-grid-gallery/commit/390e63adf84d6f48379332851ff749faeea05336)) 217 | * Configure typescript as the package's compiler ([3738a8e](https://github.com/codesweetly/react-image-grid-gallery/commit/3738a8e990bf118f7f3c8f68690186acf5aa168b)) 218 | * Delete the copy-files script ([6da1df0](https://github.com/codesweetly/react-image-grid-gallery/commit/6da1df08897eade35b5d988055d774855509cac0)) 219 | * Specify items typescript should compile ([280f7d1](https://github.com/codesweetly/react-image-grid-gallery/commit/280f7d13f289ab743a354944115dc2bf39e5450f)) 220 | * Uninstall babel packages ([f1f9e8f](https://github.com/codesweetly/react-image-grid-gallery/commit/f1f9e8fcbd7b986c72c1043a4b05e753ac96c0b6)) 221 | 222 | 223 | ### 🏠 Chores 224 | 225 | * Define package's entry point ([45f3c19](https://github.com/codesweetly/react-image-grid-gallery/commit/45f3c19c8c597d9d2f5fac8bc8494d606df330dd)) 226 | * Delete babel configuration ([846a6cf](https://github.com/codesweetly/react-image-grid-gallery/commit/846a6cf7ec34cd1e554fd0d2e42a26ed32513e50)) 227 | * Provide url and email for raising issues and reporting bugs ([7d0319c](https://github.com/codesweetly/react-image-grid-gallery/commit/7d0319c1ae47dda5b5e1e43a55bf42a33d3a5f8b)) 228 | * Specify additional ignore rules ([4659bde](https://github.com/codesweetly/react-image-grid-gallery/commit/4659bde774de21546d65e7c5dcef3c7ed8f8fe71)) 229 | * Specify files to publish to npm ([b05e3d1](https://github.com/codesweetly/react-image-grid-gallery/commit/b05e3d1a98083a8fa8ed71e4d29a89a33185f27a)) 230 | * Specify package's declaration file ([b8d634d](https://github.com/codesweetly/react-image-grid-gallery/commit/b8d634d753cfd1a570fb3d7e1368bfd8a152e38b)) 231 | 232 | 233 | ### 📝 Documentation 234 | 235 | * Add headers to installation section ([d0c444b](https://github.com/codesweetly/react-image-grid-gallery/commit/d0c444bcd76c7e2fa10148175e51ccc6fd9ef27e)) 236 | * Update readme ([1946f5c](https://github.com/codesweetly/react-image-grid-gallery/commit/1946f5c67d2f5004abe4b872d870c5aa16df5052)) 237 | 238 | 239 | ### 🐛 Bug Fix 240 | 241 | * Resolve crypto.randomUUID is not a function jest error ([d3196a2](https://github.com/codesweetly/react-image-grid-gallery/commit/d3196a22341580d4391c80363b8decdbd95f8495)) 242 | 243 | 244 | ### 🔄️ Code Refactoring 245 | 246 | * Add test section to changelog ([cc924ff](https://github.com/codesweetly/react-image-grid-gallery/commit/cc924ff00a8e874ec9ff6cb2dc107e38a87f3ee0)) 247 | * Change imagegallery's export mode from default to named exportation ([d38624c](https://github.com/codesweetly/react-image-grid-gallery/commit/d38624c59842a39b83579c8d7723e629af776e8b)) 248 | * Convert commitlint configuration file to typescript ([b4bbe51](https://github.com/codesweetly/react-image-grid-gallery/commit/b4bbe5119a282f21c7af05a67c5ccabc0f0e6453)) 249 | * Move css rulesets into imagegallerystyles file ([4529b1e](https://github.com/codesweetly/react-image-grid-gallery/commit/4529b1eba963c3827db876422e9756a75162e3c7)) 250 | * Move interface into types file ([24c2f9e](https://github.com/codesweetly/react-image-grid-gallery/commit/24c2f9ecc15f57c6e75d05af3928cb045ef9d188)) 251 | * Rename imagesArray prop to imagesInfoArray ([753fc2a](https://github.com/codesweetly/react-image-grid-gallery/commit/753fc2a7767b661003e4370e5adb6107b37d559d)) 252 | * Rename imgArray prop to imagesArray ([2b7f611](https://github.com/codesweetly/react-image-grid-gallery/commit/2b7f611ba0d97b1836576093a5945ff7d99bd66f)) 253 | * Rename imgElementArray to imageElementsArray ([a975321](https://github.com/codesweetly/react-image-grid-gallery/commit/a9753214965474878941dfe1d996b926b02e5b6f)) 254 | * Replace uniqid with crypto.randomuuid ([06bd0ee](https://github.com/codesweetly/react-image-grid-gallery/commit/06bd0eefbb27839b7536d087174a7a34314fdf12)) 255 | * Use release-it's default publish path ([2a5be4a](https://github.com/codesweetly/react-image-grid-gallery/commit/2a5be4a2a304d643873f1026f3be66f0fde1ba2a)) 256 | 257 | 258 | ### 💅 Styling and Formatting 259 | 260 | * Delete stylesheet ([f61ef5d](https://github.com/codesweetly/react-image-grid-gallery/commit/f61ef5dc238d5d799e2ef51d267748aa8e10624a)) 261 | * Move the gallery container's rulesets into the imagegallerystyles class ([db209e5](https://github.com/codesweetly/react-image-grid-gallery/commit/db209e5cb7f15e4c306c9d8ad359127ccd6f4043)) 262 | * Show figcaption on hover ([16b3708](https://github.com/codesweetly/react-image-grid-gallery/commit/16b370820a7e392f8471b4392538cf261e672708)) 263 | * Use inline css styling technique ([d2951ca](https://github.com/codesweetly/react-image-grid-gallery/commit/d2951cac95039bbf5d224d610a021dc1d553b7ee)) 264 | 265 | 266 | ### 🧪 Code Testing 267 | 268 | * Configure jest as the package's testing tool ([89fcdc3](https://github.com/codesweetly/react-image-grid-gallery/commit/89fcdc3cc08cc7442bb8f4becc8291812a3d0d8b)) 269 | * Confirm that the image gallery renders correctly ([671c90d](https://github.com/codesweetly/react-image-grid-gallery/commit/671c90d945ba9240d8064a54059283a961b5ad28)) 270 | * Convert jest configuration file to typescript ([3845d9c](https://github.com/codesweetly/react-image-grid-gallery/commit/3845d9c88908ac5835d43dd81242059c5ecc15d1)) 271 | * Rename imgArray prop to imagesArray ([3d5839d](https://github.com/codesweetly/react-image-grid-gallery/commit/3d5839d92a6a25b6ab44abe251243076af388382)) 272 | 273 | ## [0.9.4](https://github.com/codesweetly/react-image-grid-gallery/compare/0.9.3...0.9.4) (2023-05-31) 274 | 275 | 276 | ### 🧱 Dependency 277 | 278 | * Add prop-types to dependencies ([c9b2141](https://github.com/codesweetly/react-image-grid-gallery/commit/c9b214105aa0152b6dc369b481b72e2a90b73d39)) 279 | 280 | ## [0.9.3](https://github.com/codesweetly/react-image-grid-gallery/compare/0.9.2...0.9.3) (2023-05-31) 281 | 282 | 283 | ### 🧱 Dependency 284 | 285 | * Move fslightbox-react and uniqid to dependencies field ([eec267b](https://github.com/codesweetly/react-image-grid-gallery/commit/eec267bbfa56e645d9e8112636a4c0d43cdcfafb)) 286 | 287 | ## [0.9.2](https://github.com/codesweetly/react-image-grid-gallery/compare/0.9.1...0.9.2) (2023-05-30) 288 | 289 | 290 | ### 💅 Styling and Formatting 291 | 292 | * Change figcaption background's maximum opacity to 1 ([46c624f](https://github.com/codesweetly/react-image-grid-gallery/commit/46c624f8d7a61548562c09cd020a5f1ee8b5736c)) 293 | * Change padding-inline to padding ([74b638c](https://github.com/codesweetly/react-image-grid-gallery/commit/74b638cc8492dd75390c859501119e6668a5f38e)) 294 | 295 | ## [0.9.1](https://github.com/codesweetly/react-image-grid-gallery/compare/0.9.0...0.9.1) (2023-05-30) 296 | 297 | 298 | ### 📝 Documentation 299 | 300 | * Write about the 'columnWidth' and 'gapSize' props ([0637ae4](https://github.com/codesweetly/react-image-grid-gallery/commit/0637ae46d9103b0ccde9ac48189e0908e606be6c)) 301 | 302 | ## [0.9.0](https://github.com/codesweetly/react-image-grid-gallery/compare/0.8.0...0.9.0) (2023-05-30) 303 | 304 | 305 | ### 🐛 Bug Fix 306 | 307 | * Use github readme as homepage ([5cb07b4](https://github.com/codesweetly/react-image-grid-gallery/commit/5cb07b4b023d3663f2b318bbc7da858304a465a8)) 308 | 309 | 310 | ### 💅 Styling and Formatting 311 | 312 | * Use mansory grid layout format for the image gallery ([55697e3](https://github.com/codesweetly/react-image-grid-gallery/commit/55697e3f0b919178835406660811409e705e46a9)) 313 | 314 | 315 | ### 🚀 New Feature 316 | 317 | * Give users the option to specify gallery's gap size ([b42efe4](https://github.com/codesweetly/react-image-grid-gallery/commit/b42efe4744c307e1f24871d6b5919619a44d011a)) 318 | * Provide users the option to specify gallery's column width ([c54eaa4](https://github.com/codesweetly/react-image-grid-gallery/commit/c54eaa46e409cb6ca0e3ee00f949852a42bf2d9d)) 319 | 320 | ## 0.8.0 (2023-05-29) 321 | 322 | 323 | ### 🚀 New Feature 324 | 325 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 326 | 327 | 328 | ### 🔄️ Code Refactoring 329 | 330 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 331 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 332 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 333 | 334 | 335 | ### 💅 Styling and Formatting 336 | 337 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 338 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 339 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 340 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 341 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 342 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 343 | 344 | 345 | ### 📝 Documentation 346 | 347 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 348 | 349 | 350 | ### 🏠 Chores 351 | 352 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 353 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 354 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 355 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 356 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 357 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 358 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 359 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 360 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 361 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 362 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 363 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 364 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 365 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 366 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 367 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 368 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 369 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 370 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 371 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 372 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 373 | * Scope package under '@codesweetly/' ([5edc417](https://github.com/codesweetly/react-image-grid-gallery/commit/5edc4178cd84ec1ac92ef5b3476baa43deb29647)) 374 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 375 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 376 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 377 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 378 | * Update to v0.4.0 ([df9a6f9](https://github.com/codesweetly/react-image-grid-gallery/commit/df9a6f935ac9b7d8dda1998f1d966b238154fbc6)) 379 | * Update to v0.5.0 ([81acd21](https://github.com/codesweetly/react-image-grid-gallery/commit/81acd21ea742ba46212c522a480b1c666c33633e)) 380 | 381 | 382 | ### 🐛 Bug Fix 383 | 384 | * **release-it:** Change 'publishPath' to './dist' ([6edded2](https://github.com/codesweetly/react-image-grid-gallery/commit/6edded243a6494910ca5f532f65aeedd7b328803)) 385 | * Update dist's package.json file ([91261f1](https://github.com/codesweetly/react-image-grid-gallery/commit/91261f1f2c32ae6782748f343b52d3fd08d7480b)) 386 | 387 | ## 0.7.0 (2023-05-29) 388 | 389 | 390 | ### 🚀 New Feature 391 | 392 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 393 | 394 | 395 | ### 🔄️ Code Refactoring 396 | 397 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 398 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 399 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 400 | 401 | 402 | ### 💅 Styling and Formatting 403 | 404 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 405 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 406 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 407 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 408 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 409 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 410 | 411 | 412 | ### 📝 Documentation 413 | 414 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 415 | 416 | 417 | ### 🏠 Chores 418 | 419 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 420 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 421 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 422 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 423 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 424 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 425 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 426 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 427 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 428 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 429 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 430 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 431 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 432 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 433 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 434 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 435 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 436 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 437 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 438 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 439 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 440 | * Scope package under '@codesweetly/' ([5edc417](https://github.com/codesweetly/react-image-grid-gallery/commit/5edc4178cd84ec1ac92ef5b3476baa43deb29647)) 441 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 442 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 443 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 444 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 445 | * Update to v0.4.0 ([df9a6f9](https://github.com/codesweetly/react-image-grid-gallery/commit/df9a6f935ac9b7d8dda1998f1d966b238154fbc6)) 446 | * Update to v0.5.0 ([81acd21](https://github.com/codesweetly/react-image-grid-gallery/commit/81acd21ea742ba46212c522a480b1c666c33633e)) 447 | 448 | 449 | ### 🐛 Bug Fix 450 | 451 | * **release-it:** Change 'publishPath' to './dist' ([6edded2](https://github.com/codesweetly/react-image-grid-gallery/commit/6edded243a6494910ca5f532f65aeedd7b328803)) 452 | 453 | ## 0.7.0 (2023-05-29) 454 | 455 | 456 | ### 🚀 New Feature 457 | 458 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 459 | 460 | 461 | ### 🔄️ Code Refactoring 462 | 463 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 464 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 465 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 466 | 467 | 468 | ### 💅 Styling and Formatting 469 | 470 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 471 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 472 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 473 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 474 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 475 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 476 | 477 | 478 | ### 📝 Documentation 479 | 480 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 481 | 482 | 483 | ### 🏠 Chores 484 | 485 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 486 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 487 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 488 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 489 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 490 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 491 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 492 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 493 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 494 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 495 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 496 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 497 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 498 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 499 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 500 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 501 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 502 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 503 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 504 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 505 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 506 | * Scope package under '@codesweetly/' ([5edc417](https://github.com/codesweetly/react-image-grid-gallery/commit/5edc4178cd84ec1ac92ef5b3476baa43deb29647)) 507 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 508 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 509 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 510 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 511 | * Update to v0.4.0 ([df9a6f9](https://github.com/codesweetly/react-image-grid-gallery/commit/df9a6f935ac9b7d8dda1998f1d966b238154fbc6)) 512 | * Update to v0.5.0 ([81acd21](https://github.com/codesweetly/react-image-grid-gallery/commit/81acd21ea742ba46212c522a480b1c666c33633e)) 513 | 514 | ## 0.6.0 (2023-05-29) 515 | 516 | 517 | ### 🚀 New Feature 518 | 519 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 520 | 521 | 522 | ### 🔄️ Code Refactoring 523 | 524 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 525 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 526 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 527 | 528 | 529 | ### 💅 Styling and Formatting 530 | 531 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 532 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 533 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 534 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 535 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 536 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 537 | 538 | 539 | ### 📝 Documentation 540 | 541 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 542 | 543 | 544 | ### 🏠 Chores 545 | 546 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 547 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 548 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 549 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 550 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 551 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 552 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 553 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 554 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 555 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 556 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 557 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 558 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 559 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 560 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 561 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 562 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 563 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 564 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 565 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 566 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 567 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 568 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 569 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 570 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 571 | * Update to v0.4.0 ([df9a6f9](https://github.com/codesweetly/react-image-grid-gallery/commit/df9a6f935ac9b7d8dda1998f1d966b238154fbc6)) 572 | * Update to v0.5.0 ([81acd21](https://github.com/codesweetly/react-image-grid-gallery/commit/81acd21ea742ba46212c522a480b1c666c33633e)) 573 | 574 | ## 0.5.0 (2023-05-29) 575 | 576 | 577 | ### 🚀 New Feature 578 | 579 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 580 | 581 | 582 | ### 🔄️ Code Refactoring 583 | 584 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 585 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 586 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 587 | 588 | 589 | ### 💅 Styling and Formatting 590 | 591 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 592 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 593 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 594 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 595 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 596 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 597 | 598 | 599 | ### 📝 Documentation 600 | 601 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 602 | 603 | 604 | ### 🏠 Chores 605 | 606 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 607 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 608 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 609 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 610 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 611 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 612 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 613 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 614 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 615 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 616 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 617 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 618 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 619 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 620 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 621 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 622 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 623 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 624 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 625 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 626 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 627 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 628 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 629 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 630 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 631 | * Update to v0.4.0 ([df9a6f9](https://github.com/codesweetly/react-image-grid-gallery/commit/df9a6f935ac9b7d8dda1998f1d966b238154fbc6)) 632 | 633 | ## 0.4.0 (2023-05-29) 634 | 635 | 636 | ### 🚀 New Feature 637 | 638 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 639 | 640 | 641 | ### 🔄️ Code Refactoring 642 | 643 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 644 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 645 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 646 | 647 | 648 | ### 💅 Styling and Formatting 649 | 650 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 651 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 652 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 653 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 654 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 655 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 656 | 657 | 658 | ### 📝 Documentation 659 | 660 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 661 | 662 | 663 | ### 🏠 Chores 664 | 665 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 666 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 667 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 668 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 669 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 670 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 671 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 672 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 673 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 674 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 675 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 676 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 677 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 678 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 679 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 680 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 681 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 682 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 683 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 684 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 685 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 686 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 687 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 688 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 689 | * Update to v0.3.0 ([7156836](https://github.com/codesweetly/react-image-grid-gallery/commit/71568363c491cd3c8826b985123221026dfa190d)) 690 | 691 | ## 0.3.0 (2023-05-29) 692 | 693 | 694 | ### 🚀 New Feature 695 | 696 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 697 | 698 | 699 | ### 🔄️ Code Refactoring 700 | 701 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 702 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 703 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 704 | 705 | 706 | ### 💅 Styling and Formatting 707 | 708 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 709 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 710 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 711 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 712 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 713 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 714 | 715 | 716 | ### 📝 Documentation 717 | 718 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 719 | 720 | 721 | ### 🏠 Chores 722 | 723 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 724 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 725 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 726 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 727 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 728 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 729 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 730 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 731 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 732 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 733 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 734 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 735 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 736 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 737 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 738 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 739 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 740 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 741 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 742 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 743 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 744 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 745 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 746 | * Update to v0.2.0 ([6cce00e](https://github.com/codesweetly/react-image-grid-gallery/commit/6cce00e58713bbeea7ee1bf9f329c9cf3c515810)) 747 | 748 | ## 0.2.0 (2023-05-29) 749 | 750 | 751 | ### 🚀 New Feature 752 | 753 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 754 | 755 | 756 | ### 🔄️ Code Refactoring 757 | 758 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 759 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 760 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 761 | 762 | 763 | ### 💅 Styling and Formatting 764 | 765 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 766 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 767 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 768 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 769 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 770 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 771 | 772 | 773 | ### 📝 Documentation 774 | 775 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 776 | 777 | 778 | ### 🏠 Chores 779 | 780 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 781 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 782 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 783 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 784 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 785 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 786 | * Generate changelog ([e2e920a](https://github.com/codesweetly/react-image-grid-gallery/commit/e2e920aebdb04efb58d86fe7420d13008d183663)) 787 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 788 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 789 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 790 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 791 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 792 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 793 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 794 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 795 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 796 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 797 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 798 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 799 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 800 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 801 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 802 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 803 | 804 | ## 0.1.0 (2023-05-29) 805 | 806 | 807 | ### 🚀 New Feature 808 | 809 | * **ImageGallery:** Create ImageGallery component ([49c40a9](https://github.com/codesweetly/react-image-grid-gallery/commit/49c40a979383f3e381103490acb2c06a519f79b6)) 810 | 811 | 812 | ### 🔄️ Code Refactoring 813 | 814 | * Don't render
if item.caption is undefined ([1c0c59e](https://github.com/codesweetly/react-image-grid-gallery/commit/1c0c59e3bbf061d5504365c3aa1017d05d073f13)) 815 | * Make caption optional ([c47d824](https://github.com/codesweetly/react-image-grid-gallery/commit/c47d824d475487e07b445f2a72641519f0649949)) 816 | * Rename 'ImgArryProps' to 'ImgArrayType' ([8062f6c](https://github.com/codesweetly/react-image-grid-gallery/commit/8062f6cb0933af5dd58ea3b710236e26dfc24e35)) 817 | 818 | 819 | ### 💅 Styling and Formatting 820 | 821 | * Add 'codesweetly-rigg' to class names ([4e12857](https://github.com/codesweetly/react-image-grid-gallery/commit/4e12857ca399d22a7005b1e9ef071dc41ef422dc)) 822 | * Add row-gap ([4a5b2d8](https://github.com/codesweetly/react-image-grid-gallery/commit/4a5b2d8e8e7e63fe65850b8366a128c07071b85a)) 823 | * Create ImageGallery's stylesheet ([70191bc](https://github.com/codesweetly/react-image-grid-gallery/commit/70191bcdf4bb8508227e89de3346556ac85fbec5)) 824 | * Define codesweetly-img's width ([ca01ba6](https://github.com/codesweetly/react-image-grid-gallery/commit/ca01ba6150a73b6860ac4e014e705e3694127c68)) 825 | * Delete 'data-theme=light' declaration ([d578205](https://github.com/codesweetly/react-image-grid-gallery/commit/d5782050bccf79d74e4217045eeb96935008985b)) 826 | * Delete the 'codesweetly-rigg-img' class ([c87e621](https://github.com/codesweetly/react-image-grid-gallery/commit/c87e62140526d38ff5217b90482e39f3e734a5da)) 827 | 828 | 829 | ### 📝 Documentation 830 | 831 | * Create README ([bc64b22](https://github.com/codesweetly/react-image-grid-gallery/commit/bc64b22ff4e2c4602f43ed430f6e8dc640888b50)) 832 | 833 | 834 | ### 🏠 Chores 835 | 836 | * Change version number to 0.0.0 ([24da08f](https://github.com/codesweetly/react-image-grid-gallery/commit/24da08fe65fbb0428913eba947ea979f6681fef1)) 837 | * **commitlint:** Install plugins to enforce Conventional Commits ([9170395](https://github.com/codesweetly/react-image-grid-gallery/commit/9170395ee06b1a486070f40ae5a4f8caa3a0ffd5)) 838 | * Configure babel ([1d21977](https://github.com/codesweetly/react-image-grid-gallery/commit/1d219770d829660173091ed51369986eff44bae5)) 839 | * Configure TypeScript ([9604bb9](https://github.com/codesweetly/react-image-grid-gallery/commit/9604bb9d66b4d094f8048b9497abc6f3d57da5a9)) 840 | * Create 'copy-files' script ([da952a0](https://github.com/codesweetly/react-image-grid-gallery/commit/da952a0d581bd24c99f056bda45bcb6ce3a04163)) 841 | * Create a LICENSE ([13c70f0](https://github.com/codesweetly/react-image-grid-gallery/commit/13c70f0aaeb50447e18af77911784f37ef730e52)) 842 | * **github:** Configure release-it to auto-generate project's GitHub releases ([7312f92](https://github.com/codesweetly/react-image-grid-gallery/commit/7312f92dd5a6853c9fc2610af3f9e15aec7cde82)) 843 | * **github:** Specify the remote repo's url ([d800de3](https://github.com/codesweetly/react-image-grid-gallery/commit/d800de3cfee99c66bff13cd3b26865b4324c3d53)) 844 | * Ignore 'dist' folder ([12ae8a5](https://github.com/codesweetly/react-image-grid-gallery/commit/12ae8a5b362a1ba24cb9fe4650c77f7ff957ad64)) 845 | * Ignore npm-debug.log* ([aafe117](https://github.com/codesweetly/react-image-grid-gallery/commit/aafe117b241e6c0e2c5e41ebdd9ea138de3b0788)) 846 | * **ImageGallery:** Define ImgArryProps interface ([c6f04e1](https://github.com/codesweetly/react-image-grid-gallery/commit/c6f04e1ee7d8f4a52bea1b7424b186a2ab56976e)) 847 | * Initialize react-image-grid-gallery project ([bd11d5f](https://github.com/codesweetly/react-image-grid-gallery/commit/bd11d5fdedd36d33079bd6936041f6eca49cd26b)) 848 | * Make 'ImageGallery.js' the entry point ([14451d6](https://github.com/codesweetly/react-image-grid-gallery/commit/14451d664b7934364c7d9d5e37b0c04b20014804)) 849 | * **package-json:** Install packages for compiling React to JavaScript ([56cd72d](https://github.com/codesweetly/react-image-grid-gallery/commit/56cd72d0d8354b2d6017a9bd2b71a3854226e912)) 850 | * Provide info that helps people discover the package ([bf581de](https://github.com/codesweetly/react-image-grid-gallery/commit/bf581deb46c5e890a78e6da8d19cb9e7a289f957)) 851 | * **release-it:** Customize changelog's headings ([00943c8](https://github.com/codesweetly/react-image-grid-gallery/commit/00943c89ce7d9246ac8ab9aa71fc61eba77f41eb)) 852 | * **release-it:** Install version management plugin ([abfc611](https://github.com/codesweetly/react-image-grid-gallery/commit/abfc611be693890781a28d91a5d6ae5604c365c2)) 853 | * **release-it:** Let release-it auto-generate project's changelog ([8f12b98](https://github.com/codesweetly/react-image-grid-gallery/commit/8f12b98ffe81d4a073cdeeafb30785f0747d761e)) 854 | * **release-it:** Specify options to override ([bf58eee](https://github.com/codesweetly/react-image-grid-gallery/commit/bf58eee97895fc29207e1333f5c6d09692f79eee)) 855 | * **release-it:** Use plugin to provide recommended bump to release-it ([ebd37a4](https://github.com/codesweetly/react-image-grid-gallery/commit/ebd37a4b9f1e61e41f33ffd8c0be8ee124dfa986)) 856 | * **typescript:** Define declaration file's location ([589842f](https://github.com/codesweetly/react-image-grid-gallery/commit/589842f62acef66338ca0d272bd255f9f7086415)) 857 | * Update changelog sections ([8763812](https://github.com/codesweetly/react-image-grid-gallery/commit/87638120ba6defe64ca15a57509dc6466bb01c64)) 858 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023-present Oluwatobi Sofela & CodeSweetly 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Image Grid Gallery 2 | 3 | A simple, easy-to-use, and responsive image gallery component with a lightbox for displaying a grid of images in React apps. 4 | 5 | ![npm](https://img.shields.io/npm/v/react-image-grid-gallery) ![NPM](https://img.shields.io/npm/l/react-image-grid-gallery) 6 | 7 | ## Features 8 | 9 | - SEO friendly 10 | - Fullscreen support 11 | - Keyboard accessible 12 | - Mobile responsive 13 | - Lightbox with translucent background 14 | - Thumbnails 15 | - Image captions 16 | - Lazy loading support 17 | - Set column numbers dynamically or manually 18 | - Resolution switching compatible 19 | - Customizable styles 20 | 21 | ## Live Demo and Tutorial 22 | 23 | Available at: https://codesweetly.com/react-image-grid-gallery 24 | 25 | ## Installation 26 | 27 | This section shows how to install the React Image Grid Gallery package. 28 | 29 | ### Using npm 30 | 31 | ``` 32 | npm install react-image-grid-gallery --save 33 | ``` 34 | 35 | ### Using yarn 36 | 37 | ``` 38 | yarn add react-image-grid-gallery 39 | ``` 40 | 41 | ### Using pnpm 42 | 43 | ``` 44 | pnpm add react-image-grid-gallery 45 | ``` 46 | 47 | ## Usage 48 | 49 | ```js 50 | import { ImageGallery } from "react-image-grid-gallery"; 51 | 52 | const imagesArray = [ 53 | { 54 | id: "uniqueid111", 55 | alt: "Image1's alt text", 56 | caption: "Image1's description", 57 | src: "http://example.com/image1.jpg", 58 | }, 59 | { 60 | id: "uniqueid222", 61 | alt: "Image2's alt text", 62 | caption: "Image2's description", 63 | src: "http://example.com/image2.png", 64 | thumbSrc: "http://example.com/image2_640.png", 65 | }, 66 | { 67 | id: "uniqueid333", 68 | alt: "Image3's alt text", 69 | caption: "Image3's description", 70 | src: "http://example.com/image3.webp?w=2400", 71 | gridSrc: "http://example.com/image3.webp?w=1280", 72 | thumbSrc: "http://example.com/image3.webp?w=640", 73 | srcSet: 74 | "http://example.com/image3.webp?w=2400 2400w, http://example.com/image3.webp?w=1280 1280w, http://example.com/image3.webp?w=640 640w", 75 | mediaSizes: "(max-width: 640px) 640w, (max-width: 1024px) 1280w, 2400px", 76 | }, 77 | ]; 78 | 79 | function App() { 80 | return ; 81 | } 82 | ``` 83 | 84 | ## Props 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 114 | 115 | 116 | 121 | 122 | 123 | 124 | 125 | 126 | 131 | 132 | 133 | 134 | 135 | 136 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 178 | 179 | 180 | 181 | 182 | 183 | 203 | 204 | 205 | 206 |
PropsTypeDefaultDescription
imagesInfoArrayarrayundefined 101 | 102 | (**Required**) An array of objects containing the following properties: 103 | 104 | - `id`: (**Required** - string or number) Each image's [unique identifying key](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key). 105 | - `alt`: (**Required** - string) The image's [alternative text](https://webaim.org/techniques/alttext). 106 | - `caption`: (**Optional** - string) The [image's description](https://www.studysmarter.co.uk/explanations/english/blog/image-caption). 107 | - `src`: (**Required** - string) The image's default [URL](https://codesweetly.com/web-address-url). 108 | - `gridSrc`: (**Optional** - string) The preferred grid image's URL. 109 | - `thumbSrc`: (**Optional** - string) The preferred thumbnail image's URL. 110 | - `srcSet`: (**Optional** - string) The set of images' URLs and sizes for [resolution switching](https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images#resolution_switching_different_sizes). 111 | - [`mediaSizes`](https://developer.mozilla.org/en-US/docs/Web/HTML/Responsive_images#resolution_switching_different_sizes): (**Optional** - string) The media conditions and image sizes that hint the browser on the specific `srcSet` to display when a media condition is true. 112 | 113 |
117 | 118 | [`columnCount`](https://codesweetly.com/css-multi-column-layout-explained#what-is-a-css-column-count-property) 119 | 120 | number or keyword (string)"auto"(Optional) The number of columns.
127 | 128 | [`columnWidth`](https://codesweetly.com/css-multi-column-layout-explained#what-is-a-css-column-width-property) 129 | 130 | number or keyword (string)230(Optional) The minimum width of the gallery's columns.
137 | 138 | [`gapSize`](https://codesweetly.com/css-gap-property) 139 | 140 | number24(Optional) The gallery's gap size.
fixedCaptionbooleanfalse 150 | 151 | (**Optional**) Specify whether to display the image captions permanently (`true`) or to hide them by default and ease them in on mouse hover (`false`). 152 | 153 |
thumbnailBorderstring"3px solid #fff"(Optional) The thumbnail's border style.
lazybooleantrue(Optional) Specify whether to lazy load images.
lazyFromIndexnumber6 172 | 173 | (**Optional**) The image's [index](https://codesweetly.com/web-tech-terms-i/#index) to begin the grid's lazy loading. 174 | 175 | **tip:** Use a negative number to lazy load all the images. 176 | 177 |
customStylesImageGalleryStylesType{} 184 | 185 | (**Optional**) Custom styles to override the following element's default styles: 186 | 187 | - Gallery container: `galleryContainerStyle` 188 | - Gallery image button: `imageBtnStyle` 189 | - Gallery image container: `imageContainerStyle` 190 | - Gallery image element: `imageStyle` 191 | - Gallery image caption: `imageCaptionStyle` 192 | - Modal container: `modalContainerStyle` 193 | - Modal slide number: `modalSlideNumberStyle` 194 | - Modal toolbar: `modalToolbarStyle` 195 | - Modal toolbar button: `modalToolbarBtnStyle` 196 | - Modal slideshow section: `modalSlideShowSectionStyle` 197 | - Modal thumbnail section: `modalThumbnailSectionStyle` 198 | - Modal thumbnail images container: `modalThumbImgsPodStyle` 199 | - Modal image element: `modalImageStyle` 200 | - Modal slide button: `modalSlideBtnStyle` 201 | 202 |
207 | 208 | ## Note for Remix Users 209 | 210 | [Remix](https://remix.run/docs/en/1.19.0) users should add `"react-image-grid-gallery"` to their `remix.config.js` file: 211 | 212 | ```diff 213 | /** @type {import('@remix-run/dev').AppConfig} */ 214 | module.exports = { 215 | ignoredRouteFiles: ["**/.*"], 216 | + serverDependenciesToBundle: ["react-image-grid-gallery"], 217 | serverModuleFormat: "cjs", 218 | }; 219 | ``` 220 | 221 | The [`serverDependenciesToBundle`](https://remix.run/docs/en/1.19.0/file-conventions/remix-config#serverdependenciestobundle) field tells Remix to transpile and include the `"react-image-grid-gallery"` package in the server bundle. 222 | 223 | ## Note for NextJS users 224 | 225 | [NextJS](https://nextjs.org/) users should declare the [`"use client"`](https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive) directive at the top of their file. It should sit above all other `import` statements like so: 226 | 227 | ```diff 228 | + "use client"; 229 | import { ImageGallery } from "react-image-grid-gallery"; 230 | import { YouTubePlaylist } from "@codesweetly/react-youtube-playlist"; 231 | ``` 232 | 233 | The `"use client"` directive tells NextJS to consider all modules imported into the page as part of the Client Component module graph. 234 | 235 | The `ImageGallery` package works _only_ as a Client Component because it uses React's State and Lifecycle effects, such as `useState()` and `useEffect()`. 236 | 237 | ## Note for Docusaurus users 238 | 239 | Did you get a `ReferenceError: crypto is not defined` error during the build step? If so, this note is for you. 240 | 241 | Wrap the `ImageGallery` component in [``](https://docusaurus.io/docs/next/advanced/ssg#browseronly) if you get a `ReferenceError: crypto is not defined` error during your build step. 242 | 243 | ```jsx 244 | import BrowserOnly from "@docusaurus/BrowserOnly"; 245 | 246 | function YourComponent() { 247 | return ( 248 | Loading...}> 249 | {() => { 250 | const ImageGallery = require("react-image-grid-gallery").ImageGallery; 251 | return ( 252 | 258 | ); 259 | }} 260 | 261 | ); 262 | } 263 | ``` 264 | 265 | This process is essential if your `imagesArray` uses the Web Crypto API. The `` component tells Docusaurus to render the `ImageGallery` library only in the browser. It ensures that the Crypto API runs only in CSR (Client-Side Rendering) rather than during build or SSR (Server-Side Rendering). 266 | 267 | ## Build 268 | 269 | ```bash 270 | npm run build 271 | ``` 272 | 273 | ## YouTube Demo 274 | 275 | [React Image Grid Gallery Demo](https://youtu.be/WoqO2AFxEMY) 276 | 277 | ## Support 278 | 279 | 🍵 [Buy me a coffee](https://www.buymeacoffee.com/codesweetly) 280 | -------------------------------------------------------------------------------- /commitlint.config.ts: -------------------------------------------------------------------------------- 1 | import type { UserConfig } from "@commitlint/types"; 2 | 3 | const Configuration: UserConfig = { 4 | extends: ["@commitlint/config-conventional"], 5 | rules: { 6 | "subject-case": [2, "always", ["sentence-case"]], 7 | }, 8 | }; 9 | 10 | module.exports = Configuration; 11 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "jest"; 2 | 3 | const config: Config = { 4 | testEnvironment: "jsdom", 5 | setupFilesAfterEnv: ["/src/jestCryptoSetup.ts"], 6 | transform: { 7 | "^.+\\.tsx?$": "ts-jest", 8 | }, 9 | }; 10 | 11 | export default config; 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-image-grid-gallery", 3 | "version": "3.1.2", 4 | "description": "A simple image gallery with lightbox for displaying a grid of images in React apps", 5 | "main": "./dist/cjs/ImageGallery.js", 6 | "module": "./dist/esm/ImageGallery.js", 7 | "types": "./dist/esm/ImageGallery.d.ts", 8 | "homepage": "https://codesweetly.com/react-image-grid-gallery", 9 | "author": "Oluwatobi Sofela (https://www.codesweetly.com)", 10 | "license": "MIT", 11 | "scripts": { 12 | "build": "rm -r dist && npm run build:esm && npm run build:cjs", 13 | "build:esm": "tsc", 14 | "build:cjs": "tsc --module commonjs --outDir dist/cjs", 15 | "release": "dotenv release-it --", 16 | "test": "jest --config jest.config.ts", 17 | "watch": "tsc --watch", 18 | "prepare": "husky" 19 | }, 20 | "files": [ 21 | "./dist" 22 | ], 23 | "funding": { 24 | "type": "buymeacoffee", 25 | "url": "https://www.buymeacoffee.com/codesweetly" 26 | }, 27 | "keywords": [ 28 | "react", 29 | "image", 30 | "grid", 31 | "gallery", 32 | "lightbox", 33 | "component", 34 | "codesweetly" 35 | ], 36 | "repository": { 37 | "type": "git", 38 | "url": "git+https://github.com/codesweetly/react-image-grid-gallery.git" 39 | }, 40 | "bugs": { 41 | "url": "https://github.com/codesweetly/react-image-grid-gallery/issues", 42 | "email": "contact@codesweetly.com" 43 | }, 44 | "devDependencies": { 45 | "@commitlint/cli": "^19.7.1", 46 | "@commitlint/config-conventional": "^19.7.1", 47 | "@release-it/conventional-changelog": "^10.0.0", 48 | "@testing-library/react": "^16.2.0", 49 | "@types/react": "^19.0.10", 50 | "@types/react-dom": "^19.0.4", 51 | "dotenv-cli": "^8.0.0", 52 | "husky": "^9.1.7", 53 | "jest": "^29.7.0", 54 | "jest-environment-jsdom": "^29.7.0", 55 | "react": "^19.0.0", 56 | "release-it": "^18.1.2", 57 | "ts-jest": "^29.2.5", 58 | "ts-node": "^10.9.2", 59 | "typescript": "^5.7.3" 60 | }, 61 | "peerDependencies": { 62 | "react": "^19.0.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/ImageGallery.test.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { render } from "@testing-library/react"; 3 | import { test } from "@jest/globals"; 4 | import { ImageGallery } from "./ImageGallery"; 5 | 6 | const imagesArray = [ 7 | { 8 | id: crypto.randomUUID(), 9 | alt: "Image1's alt text", 10 | caption: "Image1's description", 11 | src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg", 12 | }, 13 | { 14 | id: crypto.randomUUID(), 15 | alt: "Image2's alt text", 16 | caption: "Image2's description", 17 | src: "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=2400", 18 | gridSrc: 19 | "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=1280", 20 | thumbSrc: 21 | "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=640", 22 | srcSet: 23 | "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=2400 2400w, https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=1280 1280w, https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=640 640w", 24 | mediaSizes: "(max-width: 640px) 640w, (max-width: 1024px) 1280w, 2400px", 25 | }, 26 | { 27 | id: crypto.randomUUID(), 28 | alt: "Image3's alt text", 29 | caption: "Image3's description", 30 | src: "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_1280.png", 31 | }, 32 | { 33 | id: crypto.randomUUID(), 34 | alt: "Image4's alt text", 35 | caption: "Image4's description", 36 | src: "https://cdn.pixabay.com/photo/2021/05/06/16/13/children-6233868_1280.png", 37 | }, 38 | { 39 | id: crypto.randomUUID(), 40 | alt: "Image5's alt text", 41 | caption: "Image5's description", 42 | src: "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=1974", 43 | gridSrc: 44 | "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=1494", 45 | thumbSrc: 46 | "https://images.unsplash.com/photo-1519016871193-d90e3a64d0f5?q=80&w=214", 47 | }, 48 | { 49 | id: crypto.randomUUID(), 50 | alt: "Image6's alt text", 51 | caption: "Image6's description", 52 | src: "https://cdn.pixabay.com/photo/2023/04/17/00/06/vietnam-7931381_1280.jpg", 53 | }, 54 | { 55 | id: crypto.randomUUID(), 56 | alt: "Image7's alt text", 57 | src: "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_1280.jpg", 58 | thumbSrc: 59 | "https://cdn.pixabay.com/photo/2023/05/25/22/07/river-8018379_640.jpg", 60 | }, 61 | { 62 | id: crypto.randomUUID(), 63 | alt: "Image8's alt text", 64 | src: "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_1280.jpg", 65 | thumbSrc: 66 | "https://cdn.pixabay.com/photo/2023/05/21/11/45/flowers-8008392_640.jpg", 67 | }, 68 | { 69 | id: crypto.randomUUID(), 70 | alt: "Image9's alt text", 71 | caption: "Image9's description", 72 | src: "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_1280.png", 73 | thumbSrc: 74 | "https://cdn.pixabay.com/photo/2020/09/14/15/10/birch-tree-5571242_640.png", 75 | }, 76 | { 77 | id: crypto.randomUUID(), 78 | alt: "Image10's alt text", 79 | caption: "Image10's description", 80 | src: "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=1974", 81 | gridSrc: 82 | "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=1494", 83 | thumbSrc: 84 | "https://images.unsplash.com/photo-1549490349-8643362247b5?q=80&w=214", 85 | }, 86 | { 87 | id: crypto.randomUUID(), 88 | alt: "Image11's alt text", 89 | caption: "Image11's description", 90 | src: "https://cdn.pixabay.com/photo/2023/05/09/17/20/flowers-7982037_1280.jpg", 91 | thumbSrc: 92 | "https://cdn.pixabay.com/photo/2023/05/09/17/20/flowers-7982037_640.jpg", 93 | }, 94 | { 95 | id: crypto.randomUUID(), 96 | alt: "Image12's alt text", 97 | caption: "Image12's description", 98 | src: "https://cdn.pixabay.com/photo/2023/04/17/00/06/vietnam-7931381_1280.jpg", 99 | thumbSrc: 100 | "https://cdn.pixabay.com/photo/2023/04/17/00/06/vietnam-7931381_640.jpg", 101 | }, 102 | { 103 | id: crypto.randomUUID(), 104 | alt: "13's alt text", 105 | caption: "Image13's description", 106 | src: "https://cdn.pixabay.com/photo/2023/09/29/12/38/winter-8283735_640.jpg", 107 | }, 108 | ]; 109 | 110 | test("image gallery renders correctly", () => { 111 | render( 112 | 118 | ); 119 | }); 120 | 121 | test("image gallery works with only the imagesInfoArray prop", () => { 122 | render(); 123 | }); 124 | 125 | test("image gallery works with custom styles and fixed caption", () => { 126 | const imageContainerStyle: React.CSSProperties = { 127 | margin: `0 0 0`, 128 | position: "relative", 129 | }; 130 | 131 | const imageBtnStyle: React.CSSProperties = { 132 | border: "4px solid purple", 133 | }; 134 | 135 | render( 136 | 144 | ); 145 | }); 146 | 147 | test("image gallery works with custom thumbnail border", () => { 148 | render( 149 | 153 | ); 154 | }); 155 | 156 | test("image gallery works with lazy loading", () => { 157 | render( 158 | 159 | ); 160 | }); 161 | -------------------------------------------------------------------------------- /src/ImageGallery.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactElement, useRef, useState, useEffect } from "react"; 2 | import { flushSync } from "react-dom"; 3 | import { ImageGalleryPropsType, ImgSrcInfoType } from "./ImageGallery.types"; 4 | import { imageGalleryStyles } from "./ImageGalleryStyles"; 5 | 6 | export function ImageGallery({ 7 | imagesInfoArray, 8 | columnCount = "auto", 9 | columnWidth = 230, 10 | gapSize = 24, 11 | fixedCaption = false, 12 | thumbnailBorder = "3px solid #fff", 13 | lazy = true, 14 | lazyFromIndex = 6, 15 | customStyles = {}, 16 | }: ImageGalleryPropsType) { 17 | const [imgSrcInfo, setImgSrcInfo] = useState(null); 18 | const [slideNumber, setSlideNumber] = useState(1); 19 | const [showModalControls, setShowModalControls] = useState(false); 20 | const [showThumbnails, setShowThumbnails] = useState(false); 21 | const [fullscreen, setFullscreen] = useState(false); 22 | const dialogRef = useRef(null); 23 | const lightboxRef = useRef(null); 24 | const activeThumbImgRef = useRef(null); 25 | const defaultStyles = imageGalleryStyles( 26 | columnCount, 27 | columnWidth, 28 | gapSize, 29 | fixedCaption 30 | ); 31 | const galleryStyles = { ...defaultStyles, ...customStyles }; 32 | const galleryContainerStyle = galleryStyles.galleryContainerStyle; 33 | const imageContainerStyle = galleryStyles.imageContainerStyle; 34 | const imageBtnStyle = galleryStyles.imageBtnStyle; 35 | const imageStyle = galleryStyles.imageStyle; 36 | const imageCaptionStyle = galleryStyles.imageCaptionStyle; 37 | const modalContainerStyle = galleryStyles.modalContainerStyle; 38 | const modalSlideNumberStyle = galleryStyles.modalSlideNumberStyle; 39 | const modalToolbarStyle = galleryStyles.modalToolbarStyle; 40 | const modalToolbarBtnStyle = galleryStyles.modalToolbarBtnStyle; 41 | const modalSlideShowSectionStyle = galleryStyles.modalSlideShowSectionStyle; 42 | const modalThumbnailSectionStyle = galleryStyles.modalThumbnailSectionStyle; 43 | const modalThumbImgsPodStyle = galleryStyles.modalThumbImgsPodStyle; 44 | const modalImageStyle = galleryStyles.modalImageStyle; 45 | const modalSlideBtnStyle = galleryStyles.modalSlideBtnStyle; 46 | 47 | function handleImageContainerMouseEnter( 48 | e: React.MouseEvent 49 | ) { 50 | const figcaption = e.currentTarget.querySelector("figcaption"); 51 | figcaption && (figcaption.style.opacity = "1"); 52 | } 53 | 54 | function handleImageContainerMouseLeave( 55 | e: React.MouseEvent 56 | ) { 57 | const figcaption = e.currentTarget.querySelector("figcaption"); 58 | figcaption && (figcaption.style.opacity = "0"); 59 | } 60 | 61 | function openLightboxOnSlide( 62 | number: number, 63 | src: string, 64 | srcSet?: string, 65 | mediaSizes?: string 66 | ) { 67 | setImgSrcInfo({ src, srcSet, mediaSizes }); 68 | setSlideNumber(number); 69 | dialogRef.current?.showModal(); 70 | } 71 | 72 | function changeSlide(thumbClick: boolean, step: number) { 73 | const totalImages = imagesInfoArray.length; 74 | let newSlideNumber = thumbClick ? step + 1 : slideNumber + step; 75 | 76 | newSlideNumber < 1 && (newSlideNumber = totalImages); 77 | newSlideNumber > totalImages && (newSlideNumber = 1); 78 | 79 | if (newSlideNumber <= totalImages && newSlideNumber > 0) { 80 | const imageInfo = imagesInfoArray[newSlideNumber - 1]; 81 | setSlideNumber(newSlideNumber); 82 | setImgSrcInfo({ 83 | src: imageInfo.src, 84 | srcSet: imageInfo.srcSet, 85 | mediaSizes: imageInfo.mediaSizes, 86 | }); 87 | } 88 | } 89 | 90 | function switchFullScreen(on: boolean) { 91 | if (on) { 92 | lightboxRef.current?.requestFullscreen().catch((error) => { 93 | alert( 94 | `Error while attempting to switch into fullscreen mode: ${error.message} (${error.name})` 95 | ); 96 | }); 97 | } 98 | if (!on) { 99 | document.exitFullscreen().catch((error) => console.error(error)); 100 | } 101 | } 102 | 103 | function scrollImage( 104 | thumbClick: boolean, 105 | direction: number, 106 | imgIndex: number 107 | ) { 108 | const step = thumbClick ? imgIndex : direction; 109 | flushSync(() => changeSlide(thumbClick, step)); 110 | activeThumbImgRef.current?.scrollIntoView({ 111 | behavior: "smooth", 112 | block: "nearest", 113 | inline: "center", 114 | }); 115 | } 116 | 117 | function handleKeyDownOnModal(e: React.KeyboardEvent) { 118 | e.key === "ArrowLeft" && scrollImage(false, -1, 0); 119 | e.key === "ArrowRight" && scrollImage(false, 1, 0); 120 | e.key === "f" && fullscreen && switchFullScreen(false); 121 | e.key === "f" && !fullscreen && switchFullScreen(true); 122 | } 123 | 124 | function exitFullScreenAndDialog() { 125 | fullscreen && switchFullScreen(false); 126 | dialogRef.current?.close(); 127 | } 128 | 129 | function SvgElement(pathElement: ReactElement) { 130 | return ( 131 | 138 | {pathElement} 139 | 140 | ); 141 | } 142 | 143 | function showImageCards() { 144 | const imageElementsArray = imagesInfoArray.map((imageInfo, index) => { 145 | if (imageInfo.id) { 146 | return ( 147 | 193 | ); 194 | } 195 | return ( 196 |
197 | Error: Each item in the `imagesArray` needs a unique 198 | `id` 199 |
200 | ); 201 | }); 202 | return imageElementsArray; 203 | } 204 | 205 | const lightBoxElement = ( 206 | 207 |
handleKeyDownOnModal(e)} 213 | onMouseEnter={() => setShowModalControls(true)} 214 | onMouseLeave={() => setShowModalControls(false)} 215 | onClick={(e) => 216 | (e.target as HTMLElement).tagName === "SECTION" && 217 | exitFullScreenAndDialog() 218 | } 219 | > 220 | {`${slideNumber} / ${imagesInfoArray.length}`} 226 | 232 | 243 | 257 | 271 | 282 | 283 |
289 | 307 |
309 | fixedCaption ? undefined : handleImageContainerMouseEnter(e) 310 | } 311 | onMouseLeave={(e) => 312 | fixedCaption ? undefined : handleImageContainerMouseLeave(e) 313 | } 314 | > 315 | {imagesInfoArray[slideNumber 326 | {imagesInfoArray[slideNumber - 1].caption ? ( 327 |
328 | {imagesInfoArray[slideNumber - 1].caption} 329 |
330 | ) : ( 331 | "" 332 | )} 333 |
334 | 352 |
353 |
359 |
360 | {imagesInfoArray.map((imageInfo, index) => ( 361 | {imageInfo.alt} scrollImage(true, 0, index)} 372 | /> 373 | ))} 374 |
375 |
376 |
377 | 378 | ); 379 | 380 | useEffect(() => { 381 | function handleFullscreenChange() { 382 | setFullscreen(Boolean(document.fullscreenElement)); 383 | lightboxRef.current?.focus(); 384 | } 385 | document.addEventListener("fullscreenchange", handleFullscreenChange); 386 | return () => 387 | document.removeEventListener("fullscreenchange", handleFullscreenChange); 388 | }, []); 389 | 390 | useEffect(() => { 391 | dialogRef.current?.open && 392 | (document.documentElement.style.overflow = "hidden"); 393 | !dialogRef.current?.open && (document.documentElement.style.overflow = ""); 394 | }); 395 | 396 | return ( 397 |
398 | {showImageCards()} 399 | {lightBoxElement} 400 |
401 | ); 402 | } 403 | -------------------------------------------------------------------------------- /src/ImageGallery.types.tsx: -------------------------------------------------------------------------------- 1 | export interface ImageGalleryStylesType { 2 | galleryContainerStyle?: React.CSSProperties; 3 | imageBtnStyle?: React.CSSProperties; 4 | imageContainerStyle?: React.CSSProperties; 5 | imageStyle?: React.CSSProperties; 6 | imageCaptionStyle?: React.CSSProperties; 7 | modalContainerStyle?: React.CSSProperties; 8 | modalSlideNumberStyle?: React.CSSProperties; 9 | modalToolbarStyle?: React.CSSProperties; 10 | modalToolbarBtnStyle?: React.CSSProperties; 11 | modalSlideShowSectionStyle?: React.CSSProperties; 12 | modalThumbnailSectionStyle?: React.CSSProperties; 13 | modalThumbImgsPodStyle?: React.CSSProperties; 14 | modalImageStyle?: React.CSSProperties; 15 | modalSlideBtnStyle?: React.CSSProperties; 16 | } 17 | 18 | export interface ImageGalleryPropsType { 19 | imagesInfoArray: Array<{ 20 | id: string | number; 21 | alt: string; 22 | caption?: string; 23 | src: string; 24 | gridSrc?: string; 25 | thumbSrc?: string; 26 | srcSet?: string; 27 | mediaSizes?: string; 28 | }>; 29 | columnCount?: string | number; 30 | columnWidth?: string | number; 31 | gapSize?: number; 32 | fixedCaption?: boolean; 33 | thumbnailBorder?: string; 34 | lazy?: boolean; 35 | lazyFromIndex?: number; 36 | customStyles?: ImageGalleryStylesType; 37 | } 38 | 39 | export interface ImgSrcInfoType { 40 | src: string; 41 | srcSet: string | undefined; 42 | mediaSizes: string | undefined; 43 | } 44 | -------------------------------------------------------------------------------- /src/ImageGalleryStyles.ts: -------------------------------------------------------------------------------- 1 | import { ImageGalleryStylesType } from "./ImageGallery.types"; 2 | 3 | export function imageGalleryStyles( 4 | columnCount?: string | number, 5 | columnWidth?: string | number, 6 | gapSize?: number, 7 | fixedCaption?: boolean 8 | ): ImageGalleryStylesType { 9 | const modalThumbnailSectionHeight = "20vh"; 10 | const galleryContainerStyle: React.CSSProperties = { 11 | columnCount, 12 | columnWidth: `${columnWidth}px`, 13 | columnGap: `${gapSize}px`, 14 | }; 15 | const imageBtnStyle: React.CSSProperties = { 16 | border: "none", 17 | background: "none", 18 | margin: 0, 19 | padding: 0, 20 | }; 21 | const imageContainerStyle: React.CSSProperties = { 22 | margin: `0 0 ${gapSize}px`, 23 | position: "relative", 24 | }; 25 | const imageStyle: React.CSSProperties = { 26 | width: "100%", 27 | aspectRatio: "1/1 auto", 28 | backgroundColor: "#D3D3D3", 29 | cursor: "pointer", 30 | }; 31 | const imageCaptionStyle: React.CSSProperties = { 32 | opacity: fixedCaption ? 1 : 0, 33 | transition: fixedCaption ? undefined : "opacity 1s ease-in-out", 34 | position: "absolute", 35 | left: 0, 36 | bottom: 0, 37 | zIndex: "1000", 38 | width: "100%", 39 | backgroundColor: "rgba(0, 0, 0, 0.5)", 40 | background: 41 | "linear-gradient(180deg, rgba(25, 27, 38, 0), rgba(25, 27, 38, 1))", 42 | padding: "16px", 43 | fontSize: "0.85rem", 44 | textAlign: "center", 45 | color: "#fff", 46 | }; 47 | const modalContainerStyle: React.CSSProperties = { 48 | outline: "none", 49 | position: "fixed", 50 | top: 0, 51 | left: 0, 52 | width: "100vw", 53 | height: "100vh", 54 | backgroundColor: "rgba(0, 0, 0, 0.73)", 55 | WebkitBackdropFilter: "blur(5px)", 56 | backdropFilter: "blur(5px)", 57 | }; 58 | const modalSlideNumberStyle: React.CSSProperties = { 59 | zIndex: 1, 60 | position: "absolute", 61 | left: 0, 62 | padding: "13px", 63 | backgroundColor: "rgba(35, 35, 35, 0.73)", 64 | color: "#fff", 65 | fontSize: "0.93rem", 66 | transition: "opacity 1s ease-in-out", 67 | userSelect: "none", 68 | WebkitUserSelect: "none", 69 | }; 70 | const modalToolbarStyle: React.CSSProperties = { 71 | zIndex: 1, 72 | display: "flex", 73 | position: "absolute", 74 | right: 0, 75 | alignItems: "center", 76 | backgroundColor: "rgba(35, 35, 35, 0.73)", 77 | transition: "opacity 1s ease-in-out", 78 | cursor: "pointer", 79 | }; 80 | const modalToolbarBtnStyle: React.CSSProperties = { 81 | margin: 0, 82 | border: "none", 83 | background: "none", 84 | padding: "13px", 85 | color: "#fff", 86 | cursor: "pointer", 87 | }; 88 | const modalSlideShowSectionStyle: React.CSSProperties = { 89 | position: "relative", 90 | display: "flex", 91 | alignItems: "center", 92 | justifyContent: "center", 93 | width: "inherit", 94 | transition: "height .7s linear", 95 | }; 96 | const modalImageStyle: React.CSSProperties = { 97 | margin: "auto", 98 | maxWidth: "100vw", 99 | transition: "height .7s linear", 100 | }; 101 | const modalSlideBtnStyle: React.CSSProperties = { 102 | position: "absolute", 103 | border: "none", 104 | marginInline: "7px", 105 | padding: "10px 15px", 106 | backgroundColor: "rgba(35, 35, 35, 0.73)", 107 | color: "#fff", 108 | transition: "opacity 1s ease-in-out", 109 | cursor: "pointer", 110 | userSelect: "none", 111 | WebkitUserSelect: "none", 112 | }; 113 | const modalThumbnailSectionStyle: React.CSSProperties = { 114 | overflow: "hidden", 115 | height: `${modalThumbnailSectionHeight}`, 116 | textAlign: "center", 117 | }; 118 | const modalThumbImgsPodStyle: React.CSSProperties = { 119 | display: "inline-flex", 120 | height: "inherit", 121 | paddingBlock: "12px", 122 | columnGap: "7px", 123 | }; 124 | return { 125 | galleryContainerStyle, 126 | imageBtnStyle, 127 | imageContainerStyle, 128 | imageStyle, 129 | imageCaptionStyle, 130 | modalContainerStyle, 131 | modalSlideNumberStyle, 132 | modalToolbarStyle, 133 | modalToolbarBtnStyle, 134 | modalSlideShowSectionStyle, 135 | modalThumbnailSectionStyle, 136 | modalThumbImgsPodStyle, 137 | modalImageStyle, 138 | modalSlideBtnStyle, 139 | }; 140 | } 141 | -------------------------------------------------------------------------------- /src/jestCryptoSetup.ts: -------------------------------------------------------------------------------- 1 | import crypto from "crypto"; 2 | 3 | // Define crypto.randomUUID() on the global object: 4 | Object.defineProperty(global, "crypto", { 5 | value: { 6 | randomUUID: () => crypto.randomUUID(), 7 | }, 8 | }); 9 | 10 | // Note: Created to resolve Jest's Error: Uncaught [TypeError: crypto.randomUUID is not a function] but can be used for other purposes. 11 | 12 | // Refs: 13 | // - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty 14 | // - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ 15 | // - https://stackoverflow.com/a/63749793/11841906 16 | // - https://jestjs.io/docs/configuration#setupfilesafterenv-array 17 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src/**/*"], 3 | "exclude": ["src/**/*.test.tsx"], 4 | "compilerOptions": { 5 | "jsx": "react", 6 | "module": "esnext", 7 | "moduleResolution": "node", 8 | "outDir": "dist/esm", 9 | "target": "es5", 10 | "allowSyntheticDefaultImports": true, 11 | "declaration": true, 12 | "esModuleInterop": true, 13 | "forceConsistentCasingInFileNames": true, 14 | "isolatedModules": true, 15 | "noEmitOnError": true, 16 | "noImplicitReturns": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "removeComments": true, 20 | "skipLibCheck": true, 21 | "strict": true 22 | } 23 | } 24 | --------------------------------------------------------------------------------