# shopping-cart-provider

> The 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

Latest version **1.0.2** (published 2023-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install shopping-cart-provider
pnpm add shopping-cart-provider
yarn add shopping-cart-provider
bun add shopping-cart-provider
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-03-18 |
| First published | 2023-03-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Reddy Bala Subrahmanyam |
| Maintainers | bala-subrahmanyam-reddy |
| Keywords | advance shopping cart, shopping cart, shopping-cart, shopping-cart-component |

## Links

- npm: https://www.npmjs.com/package/shopping-cart-provider
- Repository: https://github.com/ng-codes/shopping-cart-provider
- Homepage: https://github.com/ng-codes/shopping-cart-provider#readme
- Issues: https://github.com/ng-codes/shopping-cart-provider/issues
- npm.io page: https://npm.io/package/shopping-cart-provider

## Recent versions

- 1.0.2 (latest) — 2023-03-18
- 1.0.1 — 2023-03-18
- 1.0.0 — 2023-03-18

## README

# 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](https://github.com/Bala-Subrahmanyam-Reddy)

## Installation

Install with npm

```bash
  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`

```index
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`

```app
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](https://choosealicense.com/licenses/mit/)

## Contributing

Contributions are always welcome!

See `contributing.md` for ways to get started.

---
_Source: https://npm.io/package/shopping-cart-provider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._