Wsi-poc-product-list NPM

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"));