https://github.com/johnwatkins0/react-thumbnail-gallery

A responsive image gallery featuring (1) a pane showing the full image, and (2) a pane with image thumbnails, titles, and descriptions.
https://github.com/johnwatkins0/react-thumbnail-gallery

react styled-components

Last synced: 5 days ago
JSON representation

A responsive image gallery featuring (1) a pane showing the full image, and (2) a pane with image thumbnails, titles, and descriptions.

• Host: GitHub
• URL: https://github.com/johnwatkins0/react-thumbnail-gallery
• Owner: johnwatkins0
• Created: 2017-08-01T12:50:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-30T20:58:59.000Z (almost 7 years ago)
• Last Synced: 2024-10-12T16:09:26.640Z (about 1 month ago)
• Topics: react, styled-components
• Language: JavaScript
• Homepage: https://johnwatkins0.github.io/react-thumbnail-gallery/example/
• Size: 1.92 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-thumbnail-gallery

A responsive image gallery featuring (1) a pane showing the full image, and (2) a pane with image thumbnails, titles, and descriptions.

[Example](https://johnwatkins0.github.io/react-thumbnail-gallery/example/)

## Usage

For use with ES6 Javascript, install the package from NPM:

```

npm install --save react-thumbnail-gallery

```

[React](https://github.com/facebook/react), [PropTypes](https://github.com/facebook/prop-types), and [styled](https://github.com/styled-components/styled-components) must be available in the window as global variables.

```Javascript

import ThumbnailGallery from 'react-thumbnail-gallery';

const YourComponent = (items) => {

  return (

    

  )

}

```

#### Props

The thumbnail gallery requires an array of `items`. Each item is an object requiring the following props:

```Javascript

{

  id: // *string* A unique string identifier for this item.

  title: // *string* The item's title.

  description: // *string* The item's description.

  altText: // *string* The item's alt text.

  src: // *string* The item's URL.

  height: // *number* The item's height.

  width: // *number* The item's width.

  thumbSrc: // *string* The item's thumbnail URL.

  thumbHeight: // *number* The item's thumbnail height.

  thumbWidth: // *number* The item's thumbnail width.

}

```