Product card

Installation

npm install @droppxdev/productcard

Usage

import ProductCard from '@droppxdev/productcard';

<ProductCard item={Name: ''ProductName', Description: 'Loren ipsum'} />

Purpose

This component is for showcasing products on the web front-end in the form of cards.

Type of props

Name

Accepts a string containing the name of the product.

Description

Accepts a string with short description of the product.

Price

Accepts an integer specifying the numerical price of the product.

Discounted_Price

Accepts an integer that might be optionally available from data that specifies a lower numerical price of the product. if available, it will be shown instead of normal price.

Ratings

Accepts a numerical value from 1 - 5 specifying the rating of a product by a user. Contains an onClick named onStartRating that invokes a prop function which calculates the rating when clicked.

When passed as props:

Favourite

Accepts a boolean that specifies if a product is marked as a favourite or not. If returns true, a red heart icon is shown, if returns false, a white heart icon is shown.

image

Accepts URL

Methods as props

1. ::userFavourited Executes logic for favorite and un-favorite

2. ::userRating Executes logic for rating a product

3. ::onClickCard Executes logic for when the product title is clicked

Sample : https://firebasestorage.googleapis.com/v0/b/droppx-45ac7.appspot.com/o/droppx%2FProductcard.png?alt=media&token=e1356a09-47fc-4804-a9d3-34fa5064d06b