Shopping cart provider

The advance-shopping-cart provider component leverages React's Context API to make a configured shopping cart available throughout a React component tree. This component can be imported directly from the shopping-cart-provider.

Authors

• @Reddy Bala Subrahmanyam

Installation

Install with npm

  npm i shopping-cart-provider

Usage/Example

• Shopping cart provider component can be imported from shopping-cart-provider and can be placed in react component tree.
• Shopping cart provider should be placed at parent component in order to use available functions in child component

index.js or index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ShoppingCartProvider } from "shopping-cart-provider";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(

   <ShoppingCartProvider>
      <App /> //child component can be placed here
   </ShoppingCartProvider>

);

• Now we can use all the function of shopping-cart-provider in its child component by importing useShoppingCart from shopping-cart-provider
• For above example the child is App component

app.js or app.tsx

import { useShoppingCart } from "shopping-cart-provider";

function App() {

  //Use all available functions from useShoppingCart as follows
  const { getItemQuantity, increaseCartQuantity } = useShoppingCart();

  return (
    <div>
        //Add product to cart
        <button onClick={() => increaseCartQuantity({ id: "productid" })}>
          Add to cart
        </button>

        // Get quantity of product based on id
        <p>Product quantity {getItemQuantity("productid")}</p>

    </div>
  );
}

export default App;

• Similar to above example you can use and implement the advanced shopping cart functionality with all available functions.

Available Options

The useShoppingCartProvider uses React context api and has the following functions.

| Name | Type | Description | Arguments | | :--------------------- | :--------- | :------------------------------------------------------------------------------- | :---------------------------------------------------------------------------- | | getItemQuantity | Function | Gives quantity of each product based on product id | Required. id | | increaseCartQuantity | Function | Increases quantity of a product Or add product to cart (when quantity is 0) | Required. {id:id,price:price,quantity:0,data:{product data object}} | | decreaseCartQuantity | Function | Decreases quantity of a product Or remove product from cart (when quantity is 0) | Required. {id:id,price:price,quantity:0,data:{product data object}} | | removeFromCart | Function | Removes product from cart | Required. id | | cartQuantity | Constant | Gives overall quantity of products in cart | --- | | cartQuantity | Constant | Gives total products data stored in cart | --- | | cartTotal | Constant | Gives total price of cart based quantity and price | --- | | clearCart | Function | Clear cart products stored in local storage | --- |

License

MIT

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.