🛒 A lightweight shopping cart hook for React, Next.js, and Gatsby
- No dependencies
- 💳 Not tied to any payment gateway, or checkout - create your own!
- 🔥 Persistent carts with local storage, or your own adapter
- ⭐️ Supports multiples carts per page
- 🛒 Flexible cart item schema
- 🥞 Works with Next, Gatsby, React
- ♻️ Trigger your own side effects with cart handlers (on item add, update, remove)
- 🛠 Built with TypeScript
- ✅ Fully tested
- 🌮 Used by Dines
import { CartProvider, useCart } from "react-use-cart";
function Page() {
const { addItem } = useCart();
const products = [
{
id: 1,
name: "Malm",
price: 9900,
quantity: 1
},
{
id: 2,
name: "Nordli",
price: 16500,
quantity: 5
},
{
id: 3,
name: "Kullen",
price: 4500,
quantity: 1
},
];
return (
<div>
{products.map((p) => (
<div key={p.id}>
<button onClick={() => addItem(p)}>Add to cart</button>
</div>
))}
</div>
);
}
function Cart() {
const {
isEmpty,
totalUniqueItems,
items,
updateItemQuantity,
removeItem,
} = useCart();
if (isEmpty) return <p>Your cart is empty</p>;
return (
<>
<h1>Cart ({totalUniqueItems})</h1>
<ul>
{items.map((item) => (
<li key={item.id}>
{item.quantity} x {item.name} —
<button
onClick={() => updateItemQuantity(item.id, item.quantity - 1)}
>
-
</button>
<button
onClick={() => updateItemQuantity(item.id, item.quantity + 1)}
>
+
</button>
<button onClick={() => removeItem(item.id)}>×</button>
</li>
))}
</ul>
</>
);
}
function App() {
return (
<CartProvider>
<Page />
<Cart />
</CartProvider>
);
}npm install react-use-cart # yarn add react-use-cartYou will need to wrap your application with the CartProvider component so that the useCart hook can access the cart state.
Carts are persisted across visits using localStorage, unless you specify your own storage adapter.
import React from "react";
import ReactDOM from "react-dom";
import { CartProvider } from "react-use-cart";
ReactDOM.render(
<CartProvider>{/* render app/cart here */}</CartProvider>,
document.getElementById("root")
);| Prop | Required | Description |
|---|---|---|
id |
No | id for your cart to enable automatic cart retrieval via window.localStorage. If you pass a id then you can use multiple instances of CartProvider. |
onSetItems |
No | Triggered only when setItems invoked. |
onItemAdd |
No | Triggered on items added to your cart, unless the item already exists, then onItemUpdate will be invoked. |
onItemUpdate |
No | Triggered on items updated in your cart, unless you are setting the quantity to 0, then onItemRemove will be invoked. |
onItemRemove |
No | Triggered on items removed from your cart. |
onEmptyCart |
No | Triggered on empty cart. |
storage |
No | Must return [getter, setter]. |
metadata |
No | Custom global state on the cart. Stored inside of metadata. |
The useCart hook exposes all the getter/setters for your cart state.
The setItems method should be used to set all items in the cart. This will overwrite any existing cart items. A quantity default of 1 will be set for an item implicitly if no quantity is specified.
items[](Required): An array of cart item object. You must provide anidandpricevalue for new items that you add to cart.
import { useCart } from "react-use-cart";
const { setItems } = useCart();
const products = [
{
id: "ckb64v21u000001ksgw2s42ku",
name: "Fresh Foam 1080v9",
brand: "New Balance",
color: "Neon Emerald with Dark Neptune",
size: "US 10",
width: "B - Standard",
sku: "W1080LN9",
price: 15000,
},
{
id: "cjld2cjxh0000qzrmn831i7rn",
name: "Fresh Foam 1080v9",
brand: "New Balance",
color: "Neon Emerald with Dark Neptune",
size: "US 9",
width: "B - Standard",
sku: "W1080LN9",
price: 15000,
},
];
setItems(products);The addItem method should be used to add items to the cart.
item(Required): An object that represents your cart item. You must provide anidandpricevalue for new items that you add to cart.quantity(optional, default:1): The amount of items you want to add.
import { useCart } from "react-use-cart";
const { addItem } = useCart();
const product = {
id: "cjld2cjxh0000qzrmn831i7rn",
name: "Fresh Foam 1080v9",
brand: "New Balance",
color: "Neon Emerald with Dark Neptune",
size: "US 9",
width: "B - Standard",
sku: "W1080LN9",
price: 15000,
};
addItem(product, 2);The updateItem method should be used to update items in the cart.
itemId(Required): The cart itemidyou want to update.data(Required): The updated cart item object.
import { useCart } from "react-use-cart";
const { updateItem } = useCart();
updateItem("cjld2cjxh0000qzrmn831i7rn", {
size: "UK 10",
});The updateItemQuantity method should be used to update an items quantity value.
itemId(Required): The cart itemidyou want to update.quantity(Required): The updated cart item quantity.
import { useCart } from "react-use-cart";
const { updateItemQuantity } = useCart();
updateItemQuantity("cjld2cjxh0000qzrmn831i7rn", 1);The removeItem method should be used to remove an item from the cart.
itemId(Required): The cart itemidyou want to remove.
import { useCart } from "react-use-cart";
const { removeItem } = useCart();
removeItem("cjld2cjxh0000qzrmn831i7rn");The emptyCart() method should be used to remove all cart items, and resetting cart totals to the default 0 values.
import { useCart } from "react-use-cart";
const { emptyCart } = useCart();
emptyCart();The clearCartMetadata() will reset the metadata to an empty object.
import { useCart } from "react-use-cart";
const { clearCartMetadata } = useCart();
clearCartMetadata();The setCartMetadata() will replace the metadata object on the cart. You must pass it an object.
object: A object with key/value pairs. The key being a string.
import { useCart } from "react-use-cart";
const { setCartMetadata } = useCart();
setCartMetadata({ notes: "This is the only metadata" });The updateCartMetadata() will update the metadata object on the cart. You must pass it an object. This will merge the passed object with the existing metadata.
object: A object with key/value pairs. The key being a string.
import { useCart } from "react-use-cart";
const { updateCartMetadata } = useCart();
updateCartMetadata({ notes: "Leave in shed" });This will return the current cart items in an array.
import { useCart } from "react-use-cart";
const { items } = useCart();A quick and easy way to check if the cart is empty. Returned as a boolean.
import { useCart } from "react-use-cart";
const { isEmpty } = useCart();Get a specific cart item by id. Returns the item object.
itemId(Required): Theidof the item you're fetching.
import { useCart } from "react-use-cart";
const { getItem } = useCart();
const myItem = getItem("cjld2cjxh0000qzrmn831i7rn");Quickly check if an item is in the cart. Returned as a boolean.
itemId(Required): Theidof the item you're looking for.
import { useCart } from "react-use-cart";
const { inCart } = useCart();
inCart("cjld2cjxh0000qzrmn831i7rn") ? "In cart" : "Not in cart";This returns the totaly quantity of items in the cart as an integer.
import { useCart } from "react-use-cart";
const { totalItems } = useCart();This returns the total unique items in the cart as an integer.
import { useCart } from "react-use-cart";
const { totalUniqueItems } = useCart();This returns the total value of all items in the cart.
import { useCart } from "react-use-cart";
const { cartTotal } = useCart();This returns the metadata set with updateCartMetadata. This is useful for storing additional cart, or checkout values.
import { useCart } from "react-use-cart";
const { metadata } = useCart();Thanks goes to these wonderful people (emoji key):
 Tobias Nielsen 💻 |
 Craig Tweedy 💻 |
 Jonathan Steele 💻 |
 Scott Spence 💡 |
This project follows the all-contributors specification. Contributions of any kind welcome!
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent