use-shopping-cart

Increases the quantity of an item already in the cart by 1 (or by a custom amount).

Basic Usage

import { useShoppingCart } from 'use-shopping-cart'

function CartItem({ itemId }: { itemId: string }) {
  const { incrementItem, cartDetails } = useShoppingCart()
  const item = cartDetails[itemId]

  return (
    <div className="cart-item">
      <span>{item.name}</span>
      <span>Quantity: {item.quantity}</span>

      <button onClick={() => incrementItem(itemId)}>+1</button>
    </div>
  )
}

Increment by Custom Amount

You can increase the quantity by more than 1 (positive integers only):

// Increase by 10
incrementItem(itemId, { count: 10 })

Complete Cart Example

function Cart() {
  const { incrementItem, cartDetails, cartCount } = useShoppingCart()

  if (cartCount === 0) {
    return <p>Your cart is empty</p>
  }

  return (
    <div>
      {Object.entries(cartDetails).map(([id, item]) => (
        <div key={id} className="cart-item">
          <h4>{item.name}</h4>
          <p>Quantity: {item.quantity}</p>

          <button onClick={() => incrementItem(id)}>+</button>
          <button onClick={() => incrementItem(id, { count: 5 })}>+5</button>
        </div>
      ))}
    </div>
  )
}