Product Card Library

A beautiful, customizable product card component library for React applications.

Installation

For local development:

npm link

Then in your project:

npm link product-card-library

Usage

Basic Usage

import { ProductCard } from 'product-card-library';

function App() {
  return (
    <ProductCard
      image="https://example.com/product.jpg"
      title="Vintage Leather Bag"
      price={299}
      currency="$"
      description="Handmade leather totes, women's leather accessories"
      colors={[
        { color: '#8B4513', label: 'Brown' },
        { color: '#654321', label: 'Dark Brown' },
        { color: '#2C2C2C', label: 'Black' },
        { color: '#CD853F', label: 'Tan' }
      ]}
      sizes={[
        { value: 'cm', label: '40x12x30' },
        { value: 'cm', label: '42x25x37' }
      ]}
      onAddToCart={(product) => console.log('Added to cart:', product)}
      onBuyNow={(product) => console.log('Buy now:', product)}
    />
  );
}

Multiple Images with Color Selection

Images can change when colors are selected in two ways:

Method 1: Image per color

<ProductCard
  image="default-image.jpg"
  title="Multi-Color Bag"
  price={299}
  colors={[
    { 
      color: '#8B4513', 
      label: 'Brown',
      image: 'brown-bag.jpg'
    },
    { 
      color: '#2C2C2C', 
      label: 'Black',
      image: 'black-bag.jpg'
    }
  ]}
/>

Method 2: Images array

<ProductCard
  image="default-image.jpg"
  images={[
    'image-for-color-1.jpg',
    'image-for-color-2.jpg',
    'image-for-color-3.jpg'
  ]}
  title="Designer Bag"
  price={349}
  colors={[
    { color: '#FF0000', label: 'Red' },
    { color: '#0000FF', label: 'Blue' },
    { color: '#00FF00', label: 'Green' }
  ]}
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | image | string | required | Product image URL (fallback) | | images | string[] | - | Array of images for color variants | | title | string | required | Product title | | price | number \| string | required | Product price | | currency | string | '$' | Currency symbol | | description | string | undefined | Product description | | colors | ColorOption[] | [] | Available color options (can include images) | | sizes | SizeOption[] | [] | Available size options | | defaultColor | number | 0 | Default selected color index | | defaultSize | number | 0 | Default selected size index | | showQuantity | boolean | true | Show quantity selector | | onAddToCart | function | undefined | Add to cart callback | | onBuyNow | function | undefined | Buy now callback | | addToCartText | string | 'Add to cart' | Add to cart button text | | buyNowText | string | 'Buy now' | Buy now button text | | className | string | '' | Additional CSS class | | cardStyle | 'default' \| 'compact' \| 'detailed' | 'default' | Card variant | | width | number | undefined | Card width in pixels | | maxWidth | number | undefined | Card max-width in pixels | | minWidth | number | undefined | Card min-width in pixels | | imageHeight | number | undefined | Image height in pixels |

Card Styles

• default: Standard card (max-width: 400px)
• compact: Smaller card (max-width: 280px)
• detailed: Larger card with description (max-width: 450px)

Custom Sizing

You can override the default dimensions using pixel values:

<ProductCard
  image="product.jpg"
  title="Custom Size Card"
  price={199}
  width={350}          // Fixed width: 350px
  imageHeight={300}    // Image height: 300px
  onAddToCart={handleCart}
/>

Size Props

• width: Sets a fixed width in pixels
• maxWidth: Sets maximum width in pixels (card can shrink but not grow beyond this)
• minWidth: Sets minimum width in pixels (card can grow but not shrink below this)
• imageHeight: Sets the image container height in pixels

// Responsive card with constraints
<ProductCard
  image="product.jpg"
  title="Flexible Card"
  price={299}
  minWidth={280}
  maxWidth={450}
  imageHeight={350}
  onAddToCart={handleCart}
/>

Development

# Install dependencies
npm install

# Build the library
npm run build

# Watch mode
npm run dev

License

MIT