Fyndiq-component-productlist NPM

fyndiq-component-productlist

A Product List component for Fyndiq

Installation

The component can be installed through NPM:

npm i -S fyndiq-component-productlist

Components

The fyndiq-component-productlist exposes 2 components: ProductListItem and a Wrapper. The second one is used to organise several ProductListItem together and manipulate as a list: interactivity, layout...

`ProductListItem`

Usage

import React from 'react'
import ProductListItem from 'fyndiq-component-productlist'

// Normal usage
<ProductListItem
  title="Product Title"
  price="$239"
  oldPrice="$499"
  category="Product Category"
  brand="Product Brand"
  imageUrl="https://i.imgur.com/BCKlYFQ.jpg"
  rating="4.5"
  shopUrl="https://fyndiq.se/product/12345678"
  uploadDate={new Date(2017, 6, 12)}
/>

API

The component ProductListItem has the following customizable props:

Name	Type	Description	Default value
category	String	Category of the product	`null`
brand	String	Brand of the product	`null`
dealType	String	Deal type of the product. Can be `daily` or `weekly`	`null`
imageUrl	String	URL of the image	(required)
oldPrice	String	Striked price of the product	`null`
price	String	Price of the product	(required)
rating	Rating	See fyndiq-component-stars's documentation	`null`
shopUrl	String	URL of the product on the shop	`null`
title	String	Title of the product	(required)
uploadDate	Date	Date when the product was uploaded on Fyndiq.	`null`
interactive	Boolean	If true, the item will react to mouse events	`false`
open	Boolean	If true, the item will show a more detailed version of the product	`false`
showOldPrice	Boolean	If false, the `oldPrice` property will not be shown	`true`
showYours	Boolean	Show a label Your product next to the title	`false`
onClick	Function	Handler called when the product has been clicked on	`noop => noop`
additionnalData	Array	Array of data to show on the information frame, when the ProductListItem is open	`[]`

`Wrapper`

Usage

import React from 'react'
import ProductListItem, { Wrapper } from 'fyndiq-component-productlist'

// Normal usage
<Wrapper>
  <ProductListItem />
  <ProductListItem />
  <ProductListItem />
</Wrapper>

// Allow multiple products to be expanded at the same time
<Wrapper openMultiples>
  <ProductListItem />
  <ProductListItem />
  <ProductListItem />
</Wrapper>

API

The component Wrapper has the following customizable props:

Name	Type	Description	Default value
children	Node	The ProductListItems to display	(required)
openMultiples	Boolean	If true, the number of products that the user can expand will not be limited to 1	`false`