npmpackage.info

Gathering detailed insights and metrics for react-grid-gallery-style-tile

react-grid-gallery-style-tile

Justified image gallery component for React

1.0.3

1,023

MIT

TypeScript

198.31 kB

514 2.8

Installations

npm install react-grid-gallery-style-tile

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, ESM, UMD

Node Version

16.17.1

NPM Version

8.19.2 Score

73.2

Supply Chain

99.4

Quality

75.5

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

7

Total

213

Closed

101

Merged

105

Issues

Open

15

Total

158

Closed

143

Releases

v1.0.0

Published on 13 Sept 2022

v0.5.6

Published on 23 Aug 2022

v0.5.5

Published on 20 Jun 2019

v0.5.4

Published on 10 Mar 2019

v0.5.3

Published on 30 Sept 2018

v0.5.2

Published on 15 Sept 2018

View all 44 releases

Contributors

Unable to fetch Contributors

View all 17 contributors

Languages

TypeScript

JavaScript

HTML

TypeScript (96.47%)

JavaScript (3.36%)

HTML (0.18%)

Developer

benhowell

Download Statistics

Total Downloads

514

Last Day

Last Week

Last Month

Last Year

116

GitHub Statistics

1,023 Stars

694 Commits

210 Forks

23 Watching

10 Branches

17 Contributors

Maintainers

Package Meta Information

Latest Version

1.0.3

Package Id

react-grid-gallery-style-tile@1.0.3

Unpacked Size

198.31 kB

Size

42.47 kB

File Count

NPM Version

8.19.2

Node Version

16.17.1

Publised On

29 May 2023

Total Downloads

Cumulative downloads

Total Downloads

514

Last day

Compared to previous day

Last week

Compared to previous week

Last month

128.6%

Compared to previous month

Last year

-70.9%

116

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

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/

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   {
23      src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
24      width: 320,
25      height: 212,
26   },
27];
28
29<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 width and height values, 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.
cust0dian for critical bug fixes in PR 6 and PR 7.
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
mis94 for EXIF image rotation functionality PR 67
forforf for contentWindow check PR 77
ScottMRafferty for preloadNextImage not propagating to Lightbox fix PR 78
Approximator for currentImageWillChange (Function to execute before lightbox image change) PR 97.
Vadimuz for nano image props and functionality PR 101.
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.
Demo stock photos:

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

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

react-grid-gallery-style-tile

Installations

Developer Guide

Yes

CommonJS, ESM, UMD

16.17.1

8.19.2

Score

Pull Requests

7

213

101

105

Issues

15

158

143

Releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

514

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

React Grid Gallery

:tada: v1.0.0 is out!

Live Demo & Examples

Installation

Quick Start

Image Options

Gallery Options

General Notes

Contributing

License

Acknowledgements

10

10

10

2

2

0

0

0

0

0

0

0

0

2.8

/10