mcnaveen / cart

🛒 An Open Source Headless cart management library that does all the heavy lifting of managing the cart state, storing them in local storage, and even more.

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

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;

💡 SSR Example

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;

---

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.