use-shopping-cart

decrementItem()

decrementItem(sku, quantity = 1)reduces the quantity of an item based on the sku. By default, it decreases by one.

If you'd like to decrease by more than one, there is an optional quantity param:

decrementItem(sku, 10)

This decreases by 10

You currently don't have any items in your cart.
Come back after you add more items to your cart.

{}
import { useShoppingCart } from 'use-shopping-cart'
function Cart(product) {
const { decrementItem, cartDetails } = useShoppingCart()
const entries = []
for (const sku in cartDetails) {
const entry = cartDetails[sku]
entries.push(
<article
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
width: '50%'
}}
>
<figure style={{ textAlign: 'center' }}>
<img
style={{ height: 200, width: 250 }}
src={entry.image}
alt={entry.name}
/>
<figcaption>{entry.name}</figcaption>
</figure>
<p>{entry.formattedValue}</p>
<section
style={{
width: '100%',
display: 'flex',
justifyContent: 'space-evenly'
}}
>
{/* Decreases the quantity of the item */}
<button
onClick={() => decrementItem(sku)}
aria-label={`Remove one ${entry.name} from your cart`}
style={{ height: 50, width: 100, marginBottom: 30 }}
>
Remove one {entry.name} to your cart
</button>
{/* Decreases the item quantity by 10 */}
<button
onClick={() => decrementItem(sku, 10)}
aria-label={`Remove ten ${entry.name} from your cart`}
style={{ height: 50, width: 100, marginBottom: 30 }}
>
Remove 10 {entry.name} to your cart
</button>
</section>
</article>
)
}
if (entries.length) return entries
return <p>You currently don't have any items in your cart.</p>
}
Edit this page on GitHub