Install

npm install react-cart-hook

Add provider to top of your component tree

import { CartProvider } from 'react-cart-hook';
function App() {
  return (
    <CartProvider>
      {children}
    </CartProvider>
  );
}

Simply you can import useCart hook everywere

import { useCart } from 'react-cart-hook';
function MyExampleComponent() {

  const { basket , addToBasket } = useCart();

  return (
    <div>
      {basket.map(product=> ...)}
    </div>
  );
}

🔗 CartProvider

This is a Provider Component to wrapper around your entire app(or a section of it) in order to create context for the cart.

import { CartProvider } from "react-cart-hook";
<CartProvider>
  <App />
</CartProvider>

🔗 useCart

React Hook (Function) to expose cart functionality

import { useCart } from "react-cart-hook";

const { basket, user, addToBasket, removeToBasket, deleteToBasket } = useCart();

🔗 basket

basket in an Purchase array

import { useCart } from "react-cart-hook";
const { basket } = useCart();
const ShowCart = () => {
  return (
    <div>
      <ul>
        {basket.map((purchase) => (
          <li>{purchase.id}</li>
        ))}
      </ul>
    </div>
  );
};

🔗 addToBasket(Pruduct, quantity?)

Adds the product to the basket array

• Pruduct is an object {id: number, title: number , amount : number , image ?: string}

• quantity is a number, but optional. Default value is 1

const { addToBasket } = useCart();
  return (
    <button onClick={()=>addToBasket({id: 1234, amount: 5 , 'title' : 'product-1' , image : './image.png'}, 3)}>Add 2 bread for 5 USD each</button>
  );

🔗 removeToBasket(product_id,quantity?)

Reduce the amount of one of the products.

• product_id is a number
• quantity is a number, but optional. Default value is 1

const { removeToBasket } = useCart();
  return (
    <button onClick={()=>removeToBasket(1234 , 2)}>Remove items</button>
  );

🔗 deleteToBasket(product_id)

Removes all of the products with that id from the basket.

• product_id is a number

const { removeToBasket } = useCart();
  return (
    <button onClick={()=>deleteToBasket(1234)}>Delete items</button>
  );

🔗 clearBasket()

clearBasket() empties the basket, and resets the state.

const { clearBasket } = useCart();
  return (
    <button onClick={()=>clearBasket()}>Empty the basket!</button>
  );

🔗 totalCost

The total cost of all the items in the basket.

• totalCost is a number

const { totalCost } = useCart();
  return (
    <p>The total cost of the cart is: {totalCost}</p>
  );