npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

itoldya-react-grid-gallery

v1.0.1

Published

Justified gallery component for React.

Downloads

8

Readme

React Grid Gallery

Justified image gallery component for React inspired by Google Photos ~~and based upon React Images~~.

:mega: Maintainers wanted :mega:

As react-grid-gallery continues to gain popularity and provide value to many users (over a million downloads from NPM alone) it requires maintainers to take care of issues and pull requsts, and to progress the software. If you're getting value from using this component or if you're just interested in becoming a maintainer, please let me know.

A very big thankyou to Isaev Igor (@itoldya) for taking on a substantial amount of work in smoothing out some (of the many) rough edges, and for bringing react-grid-gallery up to date. I really appreciate the care taken. Check out his site at picryl.com (a great example of react-grid-gallery in use).

Note:

As of the release of v0.5.4 (2019-03-10) I will no longer be actively adding features and maintaining react-grid-gallery. My online behavioral experiment platform Psychstudio consumes all of my time and I am no longer capable of giving react-grid-gallery the attention it needs. A big thanks to everyone who has contributed over the last 5 years and thanks to everyone who has downloaded react-grid-gallery (hopefully it has been useful to you).

Live Demo & Examples

https://benhowell.github.io/react-grid-gallery/

Installation

Using npm:

npm install --save react-grid-gallery

Quick (and dirty) Start

import React from 'react';
import { render } from 'react-dom';
import Gallery from 'react-grid-gallery';

const IMAGES =
[{
        src: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 174,
        isSelected: true,
        caption: "After Rain (Jeshu John - designerspics.com)"
},
{
        src: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg",
        thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212,
        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
        caption: "Boats (Jeshu John - designerspics.com)"
},

{
        src: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_b.jpg",
        thumbnail: "https://c4.staticflickr.com/9/8887/28897124891_98c4fdd82b_n.jpg",
        thumbnailWidth: 320,
        thumbnailHeight: 212
}]

render(
        <Gallery images={IMAGES}/>,
        document.getElementById('example-0')
);

Image Options

| Property | Type | Default | Description | |:-----------------|:--------------------|:----------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | src | string | undefined | Required. A string referring to any valid image resource (file, url, etc). | | thumbnail | string | undefined | Required. A string referring to any valid image resource (file, url, etc). | | thumbnailWidth | number | undefined | Required. Width of the thumbnail image. | | thumbnailHeight | number | undefined | Required. Height of the thumbnail image. | | nano | string:base64 | undefined | Optional. Thumbnail Base64 image will be injected to background under the main image. This provides a base64, 4x4 generated image whilst the image is beong loaded. | | alt | string | "" | Optional. Image alt attribute. | | tags | array | undefined | 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 | undefined | Optional. The selected state of the image. | | caption | string|element | undefined | Optional. Image caption. | | customOverlay | element | undefined | Optional. A custom element to be rendered as a thumbnail overlay on hover. | | thumbnailCaption | string|element | undefined | Optional. A thumbnail caption shown below thumbnail. | | orientation | number | undefined | 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 | Default | Description | |:------------------------|:----------------|:-------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | images | array | undefined | Required. An array of objects containing image properties (see Image Options above). | | id | string | "ReactGridGallery" | Optional. id attribute for <Gallery> tag. This prop may be useful for those who wish to discriminate between multiple galleries. | | enableImageSelection | bool | true | Optional. Allow images to be selectable. Setting this option to false whilst supplying images with isSelected: true will result in those images being permanently selected. | | onSelectImage | func | undefined | Optional. Function to execute when an image is selected. Allows access to image object using this (See Programmers notes for more info about implicit this). Optional args: index (index of selected image in images array), image (the selected image). This function is only executable when enableImageSelection: true. | | rowHeight | number | 180 | Optional. The height of each row in the gallery. | | maxRows | number | undefined | Optional. The maximum number of rows to show in the gallery. | | margin | number | 2 | Optional. The margin around each image in the gallery. | | onClickThumbnail | func | undefined | Optional. Function to execute when gallery thumbnail clicked. Allows access to image object using this (See Programmers notes for more info about implicit this). Optional args: index (index of selected image in images array), event (the click event). | | tagStyle | object | tagStyle | Optional. Style to pass to tag elements. Overrides internal tag style. | | tileViewportStyle | func | tileViewportStyle | Optional. Function to style the image tile viewport. Allows access to image object using this (See Programmers notes for more info about implicit this). Overrides internal tileViewportStyle function. | | thumbnailStyle | func | thumbnailStyle | Optional. Function to style the image thumbnail. Allows access to image object using this (See Programmers notes for more info about implicit this). Overrides internal thumbnailStyle function. | | thumbnailImageComponent | React component | undefined | 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 | 0 | 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!

  • Image Options: thumbnail can point to the same resource as src, bearing in mind the resultant data size of the gallery and page load cost. Thumbnails of whatever size will be scaled to match rowHeight.

Programmers Notes

  • User defined functions that allow access to this via Function.prototype.call() do not require you to declare or pass this as a parameter. this will be defined at the time the function is called.

e.g.

// somewhere in your code...
function myTileViewportStyleFn() {
  if (this.props.item.isSelected)
    return {
           // something stylish...
            };
}

<Gallery images={IMAGES} tileViewportStyle={myTileViewportStyleFn}/>


// internally, within the react-grid-gallery component it will be called like so:
myTileViewportStyleFn.call(this); // this now refers to the image to be styled
  • If you don't know your thumbnailWidth and thumbnailHeight 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