nicky-song / react-products-gallery

A React library for mobile-responsive products gallery component

react-products-gallery

This library allows developers to easily integrate online shopping component into their React applications. It uses Rollup as a bundler and Material-UI for rendering major parts of its UI.

See this component in action.

Installation

npm install react-products-gallery

Usage

import ProductsGallery from 'react-products-gallery'

const products = [
  {
    id: 1,
    name: 'Antarctic Star Space Heater',
    currency: '$',
    price: 16.7,
    image: 'https://m.media-amazon.com/images/I/random-product-image-167.jpg',
    specs: [
      { property: 'Color', value: 'Black' },
      { property: 'Power Source', value: 'Corded Electric' },
      //...
    ],
    description: 'Lorem ipsum dolor sit amet',
  },
  //...
];

// ...
render() {
  return(
    <ProductsGallery
      products={products}
      callbacks={{ onAddToCart: (product) => {} }}
      options={{ mobileWidth: 600 }}
    />
  )
}

Component Props

Name	Type	Description
products	array	Check out the payload example from above. image, specs, and description are optional
options	object	Check out the list of available options from the table below
callbacks	object	Check out the list of available callbacks from the table below

Options

Name	Type	Default	Description
wrapperStyles	object	{}	Inline style object for the top-level wrapper element
autoSelectProduct	boolean	true	If true, the first product will be selected by default upon data load and search.
searchInputAutoFocus	boolean	false	If true, search field will be focused by default upon initialization of the component.
searchInputPlaceholder	string	"Find the product of your dreams"	Placeholder text for the search field.
mobileWidth	number	768	The boundary width of the component (in pixels) where it turns into mobile-friendly UI.
debounceDelay	number	350	The debounce delay for the search result (in milliseconds) to become effective.

Callbacks

Name	Type	Parameters	Description
onSelectProduct	function	(product: object)	Fired when a product is selected from the left-hand list
onUpdateSearch	function	(keyword: string)	Fired when the search keyword is changed. (Debounced)
onClearSearch	function	None	Fired when the clear button of search field is clicked.
onAddToCart	function	(product: object)	Fired when the cart button of the product detail section is clicked.