use-shopping-cart

Completely removes a product from the cart, regardless of quantity.

Basic Usage

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

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

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

      <button onClick={() => removeItem(itemId)}>Remove</button>
    </div>
  )
}

Complete Cart Example

function Cart() {
  const { removeItem, 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">
          <img src={item.image} alt={item.name} />
          <div>
            <h4>{item.name}</h4>
            <p>Quantity: {item.quantity}</p>
            <p>{item.formattedValue}</p>
          </div>

          <button onClick={() => removeItem(id)}>Remove</button>
        </div>
      ))}
    </div>
  )
}