Cart

Headless cart management library

![npm i cart](image/cover.png)

> ⚠️ Expect some breaking changes, Use at your own risk ### 🛒 Demo - [View React Demo](https://stackblitz-starters-dt9zzc.stackblitz.io/) - [Nextjs App Directory Demo](https://stackblitzstarterskcruvd-uufb--3000--d6c42aca.local-credentialless.webcontainer.io/) ### :package: Requirements - React or Nextjs Project ⚛️ ### :sparkles: Installation - Install using the below command (with your package manager of choice) ```bash # npm npm install cart --save # yarn yarn add cart #pnpm pnpm add cart # bun bun install cart ``` --- ### :bulb: Usage Example ```jsx 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 (

{isCartOpen ? "Open" : "Closed"}

{JSON.stringify(cartItems)}

); } export default Cart; ``` ### :bulb: SSR Example ```jsx 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 (

{cart?.isCartOpen ? "Open" : "Closed"}

{JSON.stringify(cart?.cartItems)}

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

{item.name}

Quantity: {item.quantity}

Price: ${item.price}

))` | | `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();` | #### :pray: Credits Huge thanks to [Peter Krumins](https://github.com/pkrumins) for the package name `cart`. Please checkout [Browserling](https://www.browserling.com/) - Online cross-browser testing platform. (Btw, This is not a sponsored message, Just my way of saying thank you) #### Contributors

_{Josh Goldberg ✨}
🔧

_{MC Naveen}
💻 🖋 📖 🤔 🚇 🚧 📆 🔧

#### :green_heart: Message I hope you find this useful. If you have any questions, please create an issue. --- > 💙 This package is based on [@JoshuaKGoldberg](https://github.com/JoshuaKGoldberg)'s [create-typescript-app](https://github.com/JoshuaKGoldberg/create-typescript-app).