Product Listing

This module provides the product listing component. We can import the component and pass props to it.

Installation

Use the yarn or npm package manager to install the product listing.

yarn installation

yarn add wsi-poc-product-list 

npm installation

npm install wsi-poc-product-list

Usage

import React from "react";
import ProductCard from 'wsi-poc-product-list/dist/components/ProductCard';
import image1 from './assets/images/Apple-Watch-SE-2.jpg';

const products = [{
  title: "Apple Watch Series 7 GPS",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 599,
  image: image1
}, {
  title: "Apple Watch Series 5",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 270,
  image: image1
}, {
  title: "Apple Watch Series 4",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 200,
  image: image1
}, {
  title: "Apple Watch Series SE",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 170,
  image: image1
},
{
  title: "Apple Watch Series 6",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 380,
  image: image1
}, {
  title: "Apple Watch Series 8",
  cat: "Aluminium Case, Starlight Sport",
  rating: "4.5",
  price: 550,
  image: image1
},];

const App = () => (
  <div className=" text-3xl mx-auto max-w-6xl">
    <div className="my-10">
      <div class="grid grid-cols-4 gap-4">
      {products?.map( item => <ProductCard {...item} />)}
      </div>
    </div>
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Latest version 1.0.6