Installations
npm install react-grid-galleryDeveloper Guide
Typescript
Yes
Module System
CommonJS, ESM, UMD
Node Version
14.19.1
NPM Version
8.7.0
Score
92.6
Supply Chain
100
Quality
79.3
Maintenance
100
Vulnerability
100
License
Releases
Contributors
Unable to fetch Contributors
Languages
TypeScript (96.47%)
JavaScript (3.36%)
HTML (0.18%)
Developer
Download Statistics
Total Downloads
2,320,038
Last Day
2,843
Last Week
14,610
Last Month
59,368
Last Year
638,375
GitHub Statistics
1,023 Stars
694 Commits
210 Forks
23 Watching
10 Branches
17 Contributors
Bundle Size
9.00 kB
Minified
3.59 kB
Minified + Gzipped
Maintainers
Package Meta Information
Latest Version
1.0.1
Package Id
react-grid-gallery@1.0.1
Unpacked Size
188.24 kB
Size
33.91 kB
File Count
18
NPM Version
8.7.0
Node Version
14.19.1
Publised On
29 Apr 2024
Total Downloads
Cumulative downloads
Total Downloads
2,320,038
Last day
-23.4%
2,843
Compared to previous day
Last week
-12.1%
14,610
Compared to previous week
Last month
12%
59,368
Compared to previous month
Last year
41%
638,375
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
Dev Dependencies
28
React Grid Gallery
Justified image gallery component for React inspired by Google Photos.
:tada: v1.0.0 is out!
There are breaking changes with v0.5.x, check out the migration guide to learn more. Documentation for v0.5.x is here.
Live Demo & Examples
https://benhowell.github.io/react-grid-gallery/
- Image Selection
- Custom Overlay
- Thumbnail Captions
- Custom Image Component
- Lightbox integration
react-image-lightbox - Lightbox integration
yet-another-react-lightbox
Installation
Using npm:
1npm install --save react-grid-gallery
Quick Start
1import { Gallery } from "react-grid-gallery"; 2 3const images = [ 4 { 5 src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg", 6 width: 320, 7 height: 174, 8 isSelected: true, 9 caption: "After Rain (Jeshu John - designerspics.com)", 10 }, 11 { 12 src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg", 13 width: 320, 14 height: 212, 15 tags: [ 16 { value: "Ocean", title: "Ocean" }, 17 { value: "People", title: "People" }, 18 ], 19 alt: "Boats (Jeshu John - designerspics.com)", 20 }, 21 { 22 src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg", 23 width: 320, 24 height: 212, 25 }, 26]; 27 28<Gallery images={images} />
Image Options
| Property | Type | Description |
|---|---|---|
| src | string | Required. A string referring to any valid image resource (file, url, etc). |
| width | number | Required. Width of the image. |
| height | number | Required. Height of the image. |
| nano | string:base64 | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is being loaded. |
| alt | string | Optional. Image alt attribute. |
| tags | array | Optional. An array of objects containing tag attributes (value, title and key if value is element). e.g. {value: "foo", title: "bar"} or {value: <a href={tag.url}>{tag.name}</a>, title: tag.title, key: tag.key} |
| isSelected | bool | Optional. The selected state of the image. |
| caption | string | ReactNode | Optional. Image caption. |
| customOverlay | element | Optional. A custom element to be rendered as a thumbnail overlay on hover. |
| thumbnailCaption | string | ReactNode | Optional. A thumbnail caption shown below thumbnail. |
| orientation | number | Optional. Orientation of the image. Many newer digital cameras (both dSLR and Point & Shoot digicams) have a built-in orientation sensor. The output of this sensor is used to set the EXIF orientation flag in the image file's metatdata to reflect the positioning of the camera with respect to the ground (See EXIF Orientation Page for more info). |
Gallery Options
| Property | Type | Description |
|---|---|---|
| images | array | Required. An array of objects containing image properties (see Image Options above). |
| id | string | Optional, default ReactGridGallery. id attribute for <Gallery> tag. This prop may be useful for those who wish to discriminate between multiple galleries. |
| enableImageSelection | bool | Optional, default true. Allow images to be selectable. Setting this option to false whilst supplying images with isSelected: true will result in those images being permanently selected. |
| onSelect | func | Optional. Function to execute when an image is selected. Optional args: index (index of selected image in images array), image (the selected image), event. This function is only executable when enableImageSelection: true. |
| rowHeight | number | Optional, default 180. The height of each row in the gallery. |
| maxRows | number | Optional. The maximum number of rows to show in the gallery. |
| margin | number | Optional, default 2. The margin around each image in the gallery. |
| onClick | func | Optional. Function to execute when gallery image clicked. Optional args: index (index of selected image in images array), image (the clicked image), event (the click event). |
| tagStyle | func | CSSProperties | Optional. Style or function that returns style to pass to tag elements. Optional args: item (the image item in images). Overrides internal tag style. |
| tileViewportStyle | func | CSSProperties | Optional. Style or function to style the image tile viewport. Optional args: item (the image item in images). Overrides internal tileViewportStyle function. |
| thumbnailStyle | func | CSSProperties | Optional. Style or function to style the image thumbnail. Optional args: item (the image item in images). Overrides internal thumbnailStyle function. |
| thumbnailImageComponent | React component | Optional. Substitute in a React component that would get passed imageProps (the props that would have been passed to the <img> tag) and item (the original item in images) to be used to render thumbnails; useful for lazy loading. |
| defaultContainerWidth | number | Optional. Set default width for the container. This option is useful during server-side rendering when we want to generate an initial markup before we can detect the actual container width. |
General Notes
-
react-grid-gallery is built for modern browsers and therefore IE support is limited to IE 11 and newer.
-
As the inspiration for this component comes from Google Photos, very small thumbnails may not be the most aesthetically pleasing due to the border size applied when selected. A sensible rowHeight default of 180px has been chosen, but rowHeights down to 100px are still reasonable.
-
Gallery width is determined by the containing element. Therefore your containing element must have a width (%, em, px, whatever) before the gallery is loaded!
-
If you don't know your
widthandheightvalues, you can find these out using any number of javascript hacks, bearing in mind the load penalty associated with these methods.
Contributing
All contributions to react-grid-gallery are very welcome. Feature requests, issue reports and pull requests are greatly appreciated. Please follow the contribution guidelines
License
React Grid Gallery is free to use for personal and commercial projects under the MIT License. Attribution is not required, but appreciated.
Acknowledgements
-
itoldya for the large overhaul of the code base to bring the library to its v1 release.
-
Visual design inspired by Google Photos.
-
Thumbnail viewport implementation inspired by GPlusGallery by Florian Maul.
-
Backend lightbox functionality via React Images by jossmac.
-
The following gallery functions were obtained from the React Images example demo: closeLightbox, gotoNext, gotoPrevious, handleClickImage, openLightbox.
-
ValYouW for lightboxWillOpen and lightBoxWillClose functionality PR 20 and customOverlay option: PR 22.
-
danalloway for theme pass-through prop PR 27
-
SimeonC for update thumbnails when maxRows changes PR 35 and resize on scrollbar presence change PR 40
-
jakub-tucek for thumbnailCaption functionality PR 42
-
ScottMRafferty for preloadNextImage not propagating to Lightbox fix PR 78
-
Approximator for currentImageWillChange (Function to execute before lightbox image change) PR 97.
-
pxpeterxu for adding functionality to inject a custom thumbnail image component (for lazy-loading) PR 104.
-
lryta for fixing crash when this.props.images.length - 1 < this.state.currentImage PR #111.
-
jimishf for lightBoxProps option to assign any prop directly to lightbox PR #121.
-
kym6464 for replacing deprecated defaultProps and for clearing of rollup cache on build PR #298
-
Demo stock photos:
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 1/5 approved changesets -- score normalized to 2
Reason
dependency not pinned by hash detected -- score normalized to 2
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:8: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/pages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/pages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/pages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/pages.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pages.yml:49: update your workflow using https://app.stepsecurity.io/secureworkflow/benhowell/react-grid-gallery/pages.yml/master?enable=pin
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 3 out of 3 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: topLevel 'contents' permission set to 'read': .github/workflows/pages.yml:10
- Info: no jobLevel write permissions found
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 28 are checked with a SAST tool
Reason
43 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-3wc5-fcw2-2329
- Warn: Project is vulnerable to: GHSA-64fm-8hw2-v72w
- Warn: Project is vulnerable to: GHSA-cvr6-37gx-v8wc
- Warn: Project is vulnerable to: GHSA-f98w-7cxr-ff2h
- Warn: Project is vulnerable to: GHSA-cg87-wmx4-v546
- Warn: Project is vulnerable to: GHSA-c59h-r6p8-q9wc
- Warn: Project is vulnerable to: GHSA-g77x-44xx-532m
- Warn: Project is vulnerable to: GHSA-7gfc-8cq8-jh5f
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Score
2.8
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More