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.