Cart Library

A React cart library providing components and hooks to easily integrate cart functionality into your React application.

Installation

npm install cart-library

or

yarn add cart-library

Peer Dependencies

This library requires the following dependencies:

{
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
  "styled-components": "^5.0.0 || ^6.0.0"
}

Basic Usage

1. Using the useCartContext Hook

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

function Product({ product }) {
  const { addItem } = useCartContext();

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button onClick={() => addItem(product)}>
        Add to cart
      </button>
    </div>
  );
}

2. Using the Cart Component

import React from 'react';
import { Cart } from 'cart-library';

function App() {
  return (
    <div>
      <h1>My Application</h1>
      {/* Other components */}
      <Cart />
    </div>
  );
}

4. Other Components

• CartItem: Displays each product in the cart
• Button, InputText, Modal, Card: Reusable UI components

Data Types

import type { ICartItem } from 'cart-library'

const item: ICartItem = {
  id: '1',
  name: 'Product A',
  price: 100000,
  quantity: 1,
  image: 'image_link'
}

Cart Hook API

This hook returns an object with the following properties and methods:

• items: CartItem[] - Array of products in the cart

• addItem(item: Omit<CartItem, 'quantity'>): void - Add a product to the cart

• updateQuantity(id: string, quantity: number): void - Update product quantity

• removeItem(id: string): void - Remove a product from the cart

Cart Component

Displays the full cart interface with add, update, and remove functionality.

Props:

• showModal?: boolean - Display the cart as a modal (default: false)

• onClose?: () => void - Function called when closing the modal

CartItem Component

Displays a single product in the cart.

Props:

• item: CartItem - Product information

• onUpdateQuantity: (id: string, quantity: number) => void - Update quantity function

• onRemove: (id: string) => void - Remove product function

Example

import React from 'react';
import { CartProvider, Cart, useCartContext } from 'cart-library';

// Product component
function ProductList() {
  const { addItem } = useCartContext();
  
  const products = [
    { id: '1', name: 'Product 1', price: 100 },
    { id: '2', name: 'Product 2', price: 200 },
    { id: '3', name: 'Product 3', price: 300 },
  ];
  
  return (
    <div>
      <h2>Product List</h2>
      {products.map(product => (
        <div key={product.id}>
          <h3>{product.name}</h3>
          <p>Price: ${product.price}</p>
          <button onClick={() => addItem(product)}>
            Add to cart
          </button>
        </div>
      ))}
    </div>
  );
}

// Main component
function App() {
  const [isCartOpen, setIsCartOpen] = React.useState(false);
  
  return (
    <CartProvider>
      <div>
        <header>
          <h1>My Store</h1>
          <button onClick={() => setIsCartOpen(true)}>
            Open cart
          </button>
        </header>
        
        <ProductList />
        
        {/* Cart as modal */}
        <Cart 
          showModal={isCartOpen} 
          onClose={() => setIsCartOpen(false)} 
        />
      </div>
    </CartProvider>
  );
}

export default App;

Styling Customization

Components use Styled Components, so you can easily customize styles by passing props or extending components:

import styled from 'styled-components';
import { Button } from 'cart-library';

const CustomButton = styled(Button)`
  background-color: #ff5722;
  border-radius: 8px;
  font-weight: bold;
  
  &:hover {
    background-color: #e64a19;
  }
`;

Development

If you want to contribute or develop the library:

1. Clone the repository

2. Install dependencies: npm install

3. Run development mode: npm run dev

4. Build the library: npm run build

License

MIT