Skip to content
/ cart Public

πŸ›’ 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.

License

Notifications You must be signed in to change notification settings

mcnaveen/cart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

21 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Cart

Headless cart management library

npm i cart

All Contributors: 2 Codecov Test Coverage Contributor Covenant License: MIT Style: Prettier TypeScript: Strict

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

πŸ›’ 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 ✨
Josh Goldberg ✨

πŸ”§
MC Naveen
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.

About

πŸ›’ 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.

Topics

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks