use-shopping-cart

DebugCart

DebugCart

If you ever need to quickly see the properties and values that useShoppingCart() has at a given moment, you can use the DebugCart component. It will display a table of all of the properties — not methods — and let you log any objects to the console.

When using this component, you still must have <CartProvider> wrapped around your application. See the documentation for CartProvider if you don't know how to do that.

This is an example of what the DebugCart component looks like.

KeyValue
cartDetails
cartCount0
totalPrice0
formattedTotalPrice"$0.00"
lastClicked""
shouldDisplayCartfalse
import { DebugCart } from 'use-shopping-cart'
export function App() {
return (
<>
<p>This is an example of what the DebugCart component looks like.</p>
<DebugCart />
</>
)
}

Without any style modifications, <DebugCart /> will present more like it does in the following screenshot. It uses fixed positioning by default.

The table resides in the top right of the page via fixed positioning and there aren't any borders around the table elements.

Debugging Tips

If you don't want to drop this component into your code or you're just more fond of the React DevTools extension, as of version 2.5.0 use-shopping-cart now uses React's useDebugValue hook to allow you to easily inspect all of the values that useShoppingCart() returns. In order to find the debug value, open React DevTools and inspect a component that calls useShoppingCart(). Under "Hooks" you will see "ShoppingCart", if you look inside it you will find the "DebugValue".

Edit this page on GitHub

On this page