React Shopping Cart Library

A comprehensive React shopping cart library with reusable UI components, built with TypeScript and modern React patterns.

Features

• 🛒 Complete Shopping Cart Functionality - Add, remove, update quantities
• 🎨 Reusable UI Components - Button, Input, Modal, Card, CartItem
• 🔧 TypeScript Support - Full type definitions included
• 📱 Responsive Design - Works on all screen sizes
• 🎯 Context API Integration - Easy state management
• 🪝 Custom Hooks - Simple API for cart operations
• 🎨 Tailwind CSS Styling - Modern, customizable styles

Installation

npm install react-shopping-cart-library

Quick Start

1. Wrap your app with CartProvider

import React from 'react';
import { CartProvider } from 'react-shopping-cart-library';

function App() {
  return (
    <CartProvider>
      {/* Your app components */}
    </CartProvider>
  );
}

2. Use the ShoppingCart component

import React from 'react';
import { ShoppingCart, useCart } from 'react-shopping-cart-library';

function MyComponent() {
  const { items, addToCart, removeFromCart, updateCartItemQuantity } = useCart();

  const sampleProduct = {
    id: '1',
    name: 'Sample Product',
    price: 29.99,
    image: 'https://via.placeholder.com/150',
    description: 'A sample product description',
    category: 'Electronics'
  };

  return (
    <div>
      <button onClick={() => addToCart(sampleProduct)}>
        Add to Cart
      </button>
      
      <ShoppingCart
        items={items}
        onItemUpdate={updateCartItemQuantity}
        onItemRemove={removeFromCart}
        showImages={true}
        showQuantityControls={true}
      />
    </div>
  );
}

Components

ShoppingCart

The main shopping cart component that displays all cart items.

<ShoppingCart
  items={cartItems}
  onItemUpdate={handleItemUpdate}
  onItemRemove={handleItemRemove}
  onClear={handleClearCart}
  showImages={true}
  showQuantityControls={true}
  className="custom-cart"
/>

Props:

• items: Array of cart items
• onItemUpdate: Function to update item quantity
• onItemRemove: Function to remove item from cart
• onClear: Function to clear entire cart
• showImages: Whether to show product images
• showQuantityControls: Whether to show quantity controls
• className: Additional CSS classes

CartItem

Individual cart item component.

<CartItem
  item={cartItem}
  onUpdate={handleUpdate}
  onRemove={handleRemove}
  showImage={true}
  showQuantityControls={true}
/>

UI Components

Button

<Button
  variant="primary" // primary, secondary, danger, success
  size="medium"     // small, medium, large
  onClick={handleClick}
  disabled={false}
>
  Click me
</Button>

Input

<Input
  type="text"
  placeholder="Enter text"
  value={value}
  onChange={setValue}
  label="Input Label"
  error="Error message"
  required
/>

Modal

<Modal
  isOpen={isOpen}
  onClose={handleClose}
  title="Modal Title"
  size="medium" // small, medium, large
>
  Modal content
</Modal>

Card

<Card
  hover={true}
  padding="medium" // small, medium, large
  className="custom-card"
>
  Card content
</Card>

Hooks

useCart

Custom hook for cart operations.

import { useCart } from 'react-shopping-cart-library';

function MyComponent() {
  const {
    items,                    // Array of cart items
    totalItems,              // Total number of items
    totalPrice,              // Total price
    addToCart,               // Add item to cart
    removeFromCart,          // Remove item from cart
    updateCartItemQuantity,  // Update item quantity
    clearCart,               // Clear entire cart
    getCartItem,             // Get specific cart item
    getCartItemQuantity,     // Get item quantity
    isItemInCart,            // Check if item is in cart
    getCartSummary           // Get cart summary
  } = useCart();

  return (
    // Your component JSX
  );
}

Types

interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
  image?: string;
  description?: string;
  category?: string;
}

interface CartContextType {
  items: CartItem[];
  totalItems: number;
  totalPrice: number;
  addItem: (item: Omit<CartItem, 'quantity'>) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, quantity: number) => void;
  clearCart: () => void;
  isInCart: (id: string) => boolean;
}

Styling

This library uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project:

npm install tailwindcss

Or include the CDN in your HTML:

<script src="https://cdn.tailwindcss.com"></script>

Examples

Basic Usage

import React, { useState } from 'react';
import { 
  CartProvider, 
  ShoppingCart, 
  useCart, 
  Button 
} from 'react-shopping-cart-library';

const ProductList = () => {
  const { addToCart } = useCart();
  
  const products = [
    {
      id: '1',
      name: 'Laptop',
      price: 999.99,
      image: 'https://via.placeholder.com/150',
      description: 'High-performance laptop',
      category: 'Electronics'
    },
    {
      id: '2',
      name: 'Mouse',
      price: 29.99,
      image: 'https://via.placeholder.com/150',
      description: 'Wireless mouse',
      category: 'Accessories'
    }
  ];

  return (
    <div className="grid grid-cols-2 gap-4">
      {products.map(product => (
        <div key={product.id} className="border p-4 rounded">
          <img src={product.image} alt={product.name} />
          <h3>{product.name}</h3>
          <p>${product.price}</p>
          <Button onClick={() => addToCart(product)}>
            Add to Cart
          </Button>
        </div>
      ))}
    </div>
  );
};

const App = () => {
  return (
    <CartProvider>
      <div className="container mx-auto p-4">
        <h1>My Store</h1>
        <ProductList />
        <ShoppingCart />
      </div>
    </CartProvider>
  );
};

export default App;

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you have any questions or issues, please open an issue on GitHub.