Cart

Headless cart management library

⚠️ Expect some breaking changes, Use at your own risk

🛒 Demo

• View React Demo
• Nextjs App Directory Demo

📦 Requirements

• React or Nextjs Project ⚛️

✨ Installation

• 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

---

💡 Usage Example

importReactfrom"react";import{useCart}from"cart";constitem={productId: "123",name: "Product 1",quantity: 1,price: 10,};functionCart(){const{
addToCart,
cartItems,
clearCart,
decreaseItem,
toggleCart,
isCartOpen,}=useCart();return(<div><p>{isCartOpen ? "Open" : "Closed"}</p><buttononClick={()=>toggleCart()}>Toggle</button><buttononClick={()=>addToCart(item)}>Add</button><buttononClick={()=>clearCart()}>Clear</button><buttononClick={()=>decreaseItem("123",1)}>Decrease</button><p>{JSON.stringify(cartItems)}</p></div>);}exportdefaultCart;

💡 SSR Example

import{useCart,withSSR}from"cart";importReactfrom"react";constitem={productId: "123",name: "Product 1",quantity: 1,price: 10,};functionMyCart(){constcart=withSSR(useCart,(state)=>state);consthandleToggle=()=>{cart?.toggleCart();};constitemadd=()=>{cart?.addToCart(item);};return(<div><p>{cart?.isCartOpen ? "Open" : "Closed"}</p><buttononClick={()=>handleToggle()}>Toggle</button><buttononClick={()=>itemadd()}>Add</button><buttononClick={()=>cart?.clearCart()}>Clear</button><buttononClick={()=>cart?.decreaseItem("123",1)}>Decrease</button><p>{JSON.stringify(cart?.cartItems)}</p></div>);}exportdefaultMyCart;

---

API Reference

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();

🙏 Credits

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)

Contributors

Josh Goldberg ✨ 🔧

MC Naveen 💻🖋📖🤔🚇🚧📆🔧

💚 Message

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.