Headless cart management library
⚠️ Expect some breaking changes, Use at your own risk
- React or Nextjs Project ⚛️
- Install using the below command (with your package manager of choice)
# npm
npm install cart --save
# yarn
yarn add cart
#pnpm
pnpm add cart
# bun
bun install cart
import React from "react";
import { useCart } from "cart";
const item = {
productId: "123",
name: "Product 1",
quantity: 1,
price: 10,
};
function Cart() {
const {
addToCart,
cartItems,
clearCart,
decreaseItem,
toggleCart,
isCartOpen,
} = useCart();
return (
<div>
<p>{isCartOpen ? "Open" : "Closed"}</p>
<button onClick={() => toggleCart()}>Toggle</button>
<button onClick={() => addToCart(item)}>Add</button>
<button onClick={() => clearCart()}>Clear</button>
<button onClick={() => decreaseItem("123", 1)}>Decrease</button>
<p>{JSON.stringify(cartItems)}</p>
</div>
);
}
export default Cart;import { useCart, withSSR } from "cart";
import React from "react";
const item = {
productId: "123",
name: "Product 1",
quantity: 1,
price: 10,
};
function MyCart() {
const cart = withSSR(useCart, (state) => state);
const handleToggle = () => {
cart?.toggleCart();
};
const itemadd = () => {
cart?.addToCart(item);
};
return (
<div>
<p>{cart?.isCartOpen ? "Open" : "Closed"}</p>
<button onClick={() => handleToggle()}>Toggle</button>
<button onClick={() => itemadd()}>Add</button>
<button onClick={() => cart?.clearCart()}>Clear</button>
<button onClick={() => cart?.decreaseItem("123", 1)}>Decrease</button>
<p>{JSON.stringify(cart?.cartItems)}</p>
</div>
);
}
export default MyCart;| Name | Type | Default Value | Description | Example |
|---|---|---|---|---|
isCartOpen |
boolean |
false |
Indicates whether the cart is open or not. | isCartOpen ? "Yes" : "No" |
toggleCart |
function |
- | Toggles the visibility of the shopping cart. | toggleCart(); |
openCart |
function |
- | Sets the cart open state to true. |
openCart(); |
closeCart |
function |
- | Sets the cart open state to false. |
closeCart(); |
cartItems |
array |
[] |
An array of items in the cart. | cartItems.map((item) => ( <div key={item.productId}> <p>{item.name}</p> <p>Quantity: {item.quantity}</p> <p>Price: ${item.price}</p> </div> )) |
addToCart |
function |
- | Adds an item to the shopping cart or updates its quantity if already in the cart. | addToCart({ productId: 'product1', name: 'Product 1', quantity: 2, price: 20 }); |
decreaseItem |
function |
- | Decreases the quantity of an item in the shopping cart or removes it if the quantity becomes zero. | decreaseItem('product1', 1); |
removeFromCart |
function |
- | Removes an item from the shopping cart. | removeFromCart('product1'); |
clearCart |
function |
- | Clears all items from the shopping cart. | clearCart(); |
Huge thanks to Peter Krumins for the package name cart.
Please checkout Browserling - Online cross-browser testing platform.
(Btw, This is not a sponsored message, Just my way of saying thank you)
 Josh Goldberg ✨ 🔧 |
 MC Naveen 💻 🖋 📖 🤔 🚇 🚧 📆 🔧 |
I hope you find this useful. If you have any questions, please create an issue.
💙 This package is based on @JoshuaKGoldberg's create-typescript-app.