react-products-gallery

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: '
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.


,
    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

Options

Callbacks