React-amazon-gallery NPM

React Amazon Gallery

Inspired by Amazon's clean display for products.

Github Page

Sample Screencap

Image of Gallery

Current Capabilities

One Dimensional Gallery View

Renders a one dimensional array of image src strings.

Two Dimensional Gallery View

Allows for clean browsing experience of product variations and similar perspective combinations which would look terrible in a grid.

Prerequisites

You should be using NodeJS and ReactJS

Installation

React Amazon Gallery is available as an npm package.

npm install react-amazon-gallery [-S]

yarn add react-amazon-gallery

Usage

Using React Amazon Gallery is very straightforward. Once it is included in your project, you can use the components this way:

import React from 'react';
import Gallery from 'react-amazon-gallery';

let images = [
  './images/image_1.jpg',
  './images/image_2.jpg',
  './images/image_3.jpg',
  './images/image_4.jpg',
  ...
]

const MyAwesomeReactComponent = () => (
  <Gallery images={images} />
);

export default MyAwesomeReactComponent;

Customization

Key		Required	Type	Description
images		Array	A 1D or a 2D Array of images. (2D) Images in Zero Index will be the secondary thumbnails
height		Integer/String	This will set the total height of the chart.
width		Integer/String	This will set override the width of the chart.
main			object	This is the config object for the main thumbnails
-	orientation	Enum	'vertical' or 'horizontal' will change the flow of image thumbnails
-	overlay	Boolean	If set, the image thumbnails will not be given gutter padding
-	posY	Enum	'top' or 'bot' will shift where the thumbnails are positioned
-	posX	Enum	'left' or 'right' will shift where the thumbnails are positioned
-	spacing	Integer	Distance between image thumbnails
-	size	Integer	Sets the size of the thumbnails
-	hlColor	String	Accepts CSS colors (Hex/Names)
-	hlSize	Integer	Sets the size of the thumbnail's highlight glow effect
style		Object	Style that is passed to SVG.
wrapStyle		Object	Style for wrapper div (div).