clearCart()
Removes all items from the cart at once. Commonly used after successful checkout.
Basic Usage
import { useShoppingCart } from 'use-shopping-cart'
function Cart() {
const { clearCart, cartCount } = useShoppingCart()
return (
<div>
<button onClick={() => clearCart()} disabled={cartCount === 0}>
Clear Cart
</button>
</div>
)
}Clear After Checkout
import { useEffect } from 'react'
import { useShoppingCart } from 'use-shopping-cart'
function CheckoutSuccess() {
const { clearCart } = useShoppingCart()
useEffect(() => {
// Clear cart after successful payment
clearCart()
}, [clearCart])
return (
<div>
<h1>Thank you for your purchase!</h1>
<p>Your order has been confirmed.</p>
</div>
)
}Notes
- Removes all items regardless of quantity
- Also clears persisted cart from localStorage
- Cannot be undone
Interactive Demo
Cart Display
Total Items: 0
Cart is empty. Add items to see them here!
Bananas
Apples
Oranges
Multiple Products
Add multiple items and clear them all at once
Try it out:
clearCart() removes all items from the cart at once
Try adding items and clearing the cart above! The cart state persists across all documentation pages.