use-ecommerce-kit is a React library designed for ecommerce state management. It enables users to perform actions like adding items to their shopping cart, adjusting quantities, removing items, clearing the entire cart, and viewing its contents.
To install the library using npm, run the following command:
npm install use-ecommerce-kitNote: This library heavily relies on @tanstack/react-query.
The following parameters are required in order for the items to load properly in the cart
type ProductTypes = {
productId: string,
name: string,
price: number,
amount: number[],
// generic type for any other fields
[key: string]: any,
};You can also use any other fields That fit within your ecommerce requirements.
Each hook must be used within the CartProvider JSX element, which is what provides the cart state with the context.
import React from "react";
import { CartProvider } from "use-ecommerce-kit";
const App = () => {
return (
<CartProvider>
<ChildComponents />
</CartProvider>
);
};import React from "react";
import { useCartContext } from "use-ecommerce-kit";
const ShopItem = () => {
const productInfo = {
productId: "1234",
name: "T-Shirt",
price: 23,
// optional fields
image: "src/asset.png",
description: "fresh drip",
};
const { addToCart } = useCartContext();
const handleCart = () => {
// passes the ID, amount added, and product info to context
addToCart(productInfo.productId, 1, productInfo);
};
return (
<div>
<h1>{productInfo.name}</h1>
<img src={productInfo.image} alt="product-image" />
<h4>${contentEntry.fields.price.toFixed(2)}</h4>
<p>{productInfo.decription}</p>
<button onClick={handleCart}>Add to Cart</button>
</div>
);
};import React from "react";
import { useCartContext } from "use-ecommerce-kit";
const CartItem = () => {
const { state, increase, decrease, remove } = useCartContext();
return (
<div>
{state.cart.map((item, index) =>
<div key={index}>
<h3>{item.name}</h3>
<p>Quantity: {item.amount.length}</p>
<button onClick={() => increase(item.productId)}>Increase</button>
<button onClick={() => decrease(item.productId)}>Decrease</button>
<button onClick={() => remove(item.productId)}>Remove</button>
</div>
)}
</div>
);
};import React from "react";
import { useCartContext } from "use-ecommerce-kit";
const CartSummary = () => {
const { clear } = useCartContext();
return (
<div>
<h2>Cart Summary</h2>
<button onClick={clear}>Clear Cart</button>
</div>
);
};import React from "react";
import { useCartContext } from "use-ecommerce-kit";
const CartTotal = () => {
const { state } = useCartContext();
return (
<div>
// total price
<h2>Total Price: ${state.total.toFixed(2)}</h2>
// total quantity
<h1>{state.amount}</h1>
</div>
);
};