A tiny react hook for creating a e-commerce cart in your app

Using e-commerce carts in React are sometimes way to bloated and come with strong opinions on styling, use-cart gets out your way and gives you the building blocks to build in shopping cart functionality into your react app.

Note: please ensure you install versions >= 16.8.0 for both react and react-dom, as this library depends on the new hooks feature

npm i use-cart --save

yarn add use-cart

import { CartProvider, useCart } from "use-cart"

// Wrap your app to expose the store
const App = () => (
  <CartProvider>
    <>
      <Item />
      <Cart />
    </>
  </CartProvider>
)

// Add the hook in any child component to get access to functions
const Item = () => {
  const { addItem } = useCart()
  return (
    <div>
      <p>My item for sale</p>
      <button onClick={() => addItem("TEST_SKU")}>Add to basket</button>
    </div>
  )
}

// You can use the hook in as many components as you want and they all share the same cart state
const Cart = () => {
  const { items, addItem, removeItem, removeLineItem, clearCart } = useCart()

  return (
    <div>
      {items.map(item => (
        <div>
          {item.sku} - {item.quantity}{" "}
          <Button onClick={() => addItem(item.sku)}>Increase Quantity</Button>
          <Button onClick={() => removeItem(item.sku)}>
            Decrease Quantity
          </Button>
          <Button onClick={() => removeLineItem(item.sku)}>
            Remove from cart
          </Button>
        </div>
      ))}
      <Button onClick={clearCart}>Clear Cart</Button>
    </div>
  )
}

• Basic
• Fetching extra product data
• Initial cart
• Using local storage to load initial cart

Passes the cart object to the useCart hook

initialCart (Array): initial state that the cart will contain on initial render, it must be an array of objects

children (React.ReactNode): react component, usually containing the rest of your app

The main hook must be wrapped with the CartProvider component at some point in the ancestor tree

Object containing:

• addItem(sku, [quantity=1]): Function - takes a sku an optional quantity (defaults to 1) to add to the cart
• removeItem(sku, [quantity=1]): Function - removes an item from the cart defaults to a quantity of 1.
• removeLineItem(sku): Function - removes an entire line item from the cart
• clearCart(): Function - removes all items from the cart
• isInCart(sku): Function - returns true if sku is present in the cart otherwise false
• items: Array - array of objects containing a minimum of sku and quantity properties on each object
• lineItemsCount: Number - returns number of unique line items n the cart
• totalItemsCount: Number - returns number of all quantities of line items combined

This method adds an item to the cart identified by its sku, if you would like to add more quantity you can pass an optional quantity value.

sku (String): The unique item sku that identifies the item in the cart

[quantity=1] (Number): The quantity added to the cart

(undefined)

Removes a quantity from an item in the cart if this number drops to 0 the line item is removed from the cart.

sku (String): The unique item sku that identifies the item in the cart

[quantity=1] (Number): The quantity removed from the cart

(undefined)

A convenience function that removes an entire line item from the cart. This would be the same thing as getting the quantity of a line item then calling removeItem() by that quantity.

sku (String): The unique item sku that identifies the item in the cart

(undefined)

Allows you to quickly check if a item with the given sku is present in the cart

sku (String): The unique item sku that identifies the item in the cart

(boolean): Returns true if the sku exists in the cart

(array): An array containing objects with sku and quantity properties of each item in the cart.

(number): The number of unique skus in the cart

(number): The number of all the quantities from all the sku's in the cart

MIT License.