🛒
react-use-shoppingcart A light weight custom hook for handling shopping cart logic, and make youre life easier .
Features
-
💳 Not tied to any payment gateway, or checkout - create your own! -
🔥 Persistent carts with local storage. -
⭐️ Supports multiples carts per page -
🛒 Flexible cart item schema -
🥞 Works with Next, React -
🛠 Built with TypeScript -
✅ Fully tested
Usage/Examples
Install
npm i react-use-shoppingcart
or
yarn add react-use-shoppingcart
basic Usage
app.js
import { CartContextProvider } from 'react-use-shoppingcart';
import Navbar from './components/navbar';
import Product from './components/product';
import Cart from './components/cart';
function App() {
return (
<div className="App">
<CartContextProvider>
<Navbar />
<Cart />
<Product />
</CartContextProvider>
</div>
);
}
product.js
import { useCart } from "react-use-shoppingcart";
const products = [
{
id: 1,
name: "jacket",
price: 500,
image: "path/to/image"
...
},
{
id: 2,
name: "jeans",
price: 100,
image: "path/to/image"
...
},
{
id: 3,
name: "t-shirt",
price: 254,
image: "path/to/image"
...
},
];
const Product = () => {
const { addToCart } = useCart();
return (
<div className="container">
{products.map((product) => {
return (
<div className="card" key={product.id}>
<img
src={product.image}
alt="product image"
/>
<h1>{product.name}</h1>
<p className="price">{product.price}$</p>
<p>
<button onClick={() => addToCart(product)}>Add to Cart</button>
</p>
</div>
);
})}
</div>
);
}
export default Product;
cart.js
const Cart = () => {
const { cartItems, removeFromCart, clearCart, totalPriceCart } = useCart();
return (
<div>
<div className="cartContainer">
{cartItems.map(item => {
return (
<div className="cart" key={item.product.id}>
<div>
<div>
{item.product.name} - {item.product.price}$: - qty:
{item.qty}
</div>
</div>
<div>
<div>
<button onClick={() => removeFromCart(item.product.id)}>
remove
</button>
</div>
</div>
</div>
);
})}
</div>
<div>
<div>Total : {totalPriceCart}</div>
<button onClick={clearCart}>clear</button>
</div>
</div>
);
};
export default Cart;
Documentation
addToCart (product,quatity = 1)
the addToCart
function will add the product to the cart, and accept an optional quatity
param with a default value of 1
.
removeFromCart (productId)
the removeFromCart
function will remove the product from the cart.
clearCart ()
the clearCart
function will clear the cart.
cartItems []
the cartItems
is an array of the existed products in the cart.
totalPriceCart
the totalPriceCart
is the total price of the existed products in the cart.
Contributing
Contributions are always welcome!