useShoppingCart()

function useShoppingCart(): UseShoppingCartReturn

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

function MyComponent() {
  const {
    // Cart state
    cartCount,
    totalPrice,
    formattedTotalPrice,
    cartDetails,

    // Cart actions
    addItem,
    removeItem,
    incrementItem,
    decrementItem,
    clearCart,

    // Checkout
    redirectToCheckout
  } = useShoppingCart()

  // Use cart state and methods
}

function ProductCard({ product }) {
  const { addItem, cartDetails, redirectToCheckout } = useShoppingCart()

  const itemInCart = cartDetails[product.id]

  const handleCheckout = async () => {
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cartDetails })
    })

    const { sessionUrl } = await response.json()
    await redirectToCheckout(sessionUrl)
  }

  return (
    <div className="product">
      <h3>{product.name}</h3>
      <p>${product.price / 100}</p>

      {itemInCart ? (
        <p>In cart: {itemInCart.quantity}</p>
      ) : (
        <button onClick={() => addItem(product)}>Add to Cart</button>
      )}
    </div>
  )
}

function CartSummary() {
  const {
    cartCount,
    formattedTotalPrice,
    cartDetails,
    incrementItem,
    decrementItem,
    removeItem,
    redirectToCheckout
  } = useShoppingCart()

  const handleCheckout = async () => {
    const response = await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cartDetails })
    })

    const { sessionUrl } = await response.json()
    await redirectToCheckout(sessionUrl)
  }

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

  return (
    <div className="cart">
      <h2>Cart ({cartCount} items)</h2>

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

          <div className="quantity-controls">
            <button onClick={() => decrementItem(id)}>-</button>
            <span>{item.quantity}</span>
            <button onClick={() => incrementItem(id)}>+</button>
            <button onClick={() => removeItem(id)}>Remove</button>
          </div>
        </div>
      ))}

      <div className="cart-total">
        <h3>Total: {formattedTotalPrice}</h3>
        <button onClick={handleCheckout}>Checkout</button>
      </div>
    </div>
  )
}

import { useShoppingCart } from 'use-shopping-cart'
import type { Product } from 'use-shopping-cart/core'

function TypeSafeComponent() {
  const { addItem, cartDetails, incrementItem } = useShoppingCart()

  // Fully typed product
  const product: Product = {
    id: 'banana_001',
    name: 'Bananas',
    price: 400,
    currency: 'USD'
  }

  addItem(product)
}