use-shopping-cart

This property specifies the localStorage key name used to persist the cart. By default, the cart is stored under the key 'use-shopping-cart'.

Type

string

Default

'use-shopping-cart'

Usage

import ReactDOM from 'react-dom'
import { CartProvider } from 'use-shopping-cart/react'
import App from './App'

ReactDOM.render(
  <CartProvider
    stripe={process.env.REACT_APP_STRIPE_API_PUBLIC}
    currency="USD"
    persistKey="my-custom-cart"
  >
    <App />
  </CartProvider>,
  document.getElementById('root')
)

How It Works

The persistKey is used directly as the localStorage key:

// Default behavior
localStorage.setItem('use-shopping-cart', cartData)

// With custom persistKey
localStorage.setItem('my-custom-cart', cartData)

Common Use Cases

Multiple Cart Instances

Run multiple independent carts on the same site:

// Main shopping cart
<CartProvider persistKey="main-cart">
  <MainStore />
</CartProvider>

// Gift registry cart
<CartProvider persistKey="gift-registry">
  <GiftRegistry />
</CartProvider>

Each cart maintains its own separate localStorage entry.

Environment-Specific Keys

Use different keys for development and production:

const persistKey = process.env.NODE_ENV === 'production'
  ? 'shopping-cart'
  : 'dev-shopping-cart'

<CartProvider persistKey={persistKey}>
  <App />
</CartProvider>

Namespace by User

For multi-tenant applications:

const persistKey = `cart-${userId}`

<CartProvider persistKey={persistKey}>
  <App />
</CartProvider>

Avoid Conflicts

If your app uses localStorage extensively:

<CartProvider persistKey="mystore-shopping-cart">
  <App />
</CartProvider>

Inspecting in DevTools

You can view the persisted cart data:

Open browser DevTools
Go to Application > Storage > Local Storage
Find your key (default: 'use-shopping-cart')
View the JSON cart data

Clear Specific Cart

// Clear specific cart from localStorage
localStorage.removeItem('my-custom-cart')

Notes

Only relevant when shouldPersist={true} (default)
The key is used as-is, no prefixes or transformations
Choose unique keys to avoid conflicts
Keep keys consistent to maintain cart across sessions

persistKey