# react-products-gallery

> A mobile-responsive products gallery component

Latest version **1.0.5** (published 2022-06-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-products-gallery
pnpm add react-products-gallery
yarn add react-products-gallery
bun add react-products-gallery
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2022-06-15 |
| First published | 2022-05-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nicholas Song |
| Maintainers | nickiesong |
| Keywords | product, gallery |

## Links

- npm: https://www.npmjs.com/package/react-products-gallery
- npm.io page: https://npm.io/package/react-products-gallery

## Recent versions

- 1.0.5 (latest) — 2022-06-15
- 1.0.4 — 2022-05-23
- 1.0.3 — 2022-05-22
- 1.0.2 — 2022-05-22
- 1.0.1 — 2022-05-22
- 1.0.0 — 2022-05-22
- 0.1.19 — 2022-05-22
- 0.1.18 — 2022-05-21
- 0.1.17 — 2022-05-21
- 0.1.16 — 2022-05-21
- 0.1.15 — 2022-05-21
- 0.1.14 — 2022-05-21
- 0.1.13 — 2022-05-21
- 0.1.12 — 2022-05-21
- 0.1.11 — 2022-05-21
- … 11 more at https://npm.io/package/react-products-gallery/versions

## README

# 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](https://productsgallery.netlify.com/).

## Installation
```shell
npm install react-products-gallery
```

## Usage
```js
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](#options) from the table below
|callbacks          |`object`       |Check out the list of available [callbacks](#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.

---
_Source: https://npm.io/package/react-products-gallery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._