### Installing Example Dependencies (Shell)

Source: https://github.com/notrab/react-use-cart/blob/main/CONTRIBUTING.md

These commands navigate into the `example` directory and install its specific dependencies using npm. This step is necessary to set up the local environment required to run the example application that utilizes the `react-use-cart` library.

```Shell
cd example && npm install
```

--------------------------------

### Starting Development Server (Shell)

Source: https://github.com/notrab/react-use-cart/blob/main/CONTRIBUTING.md

This command is used to start the project in development and watch mode, typically leveraging `tsdx` to compile and build the library while monitoring file changes. It allows for rapid iteration during development.

```Shell
npm start
```

--------------------------------

### Installing react-use-cart with npm or yarn (Bash)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Provides the command line instructions to install the `react-use-cart` package using either the npm or yarn package managers, which is required before using the library in your project.

```bash
npm install react-use-cart # yarn add react-use-cart
```

--------------------------------

### Basic Usage Example with react-use-cart (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This comprehensive example demonstrates the core usage of `react-use-cart`, showing how to wrap your application with `CartProvider`, how to use the `useCart` hook within components to access cart state and methods, and how to perform basic operations like adding, updating quantity, and removing items.

```js
import { CartProvider, useCart } from "react-use-cart";

function Page() {
  const { addItem } = useCart();

  const products = [
    {
      id: 1,
      name: "Malm",
      price: 9900,
      quantity: 1
    },
    {
      id: 2,
      name: "Nordli",
      price: 16500,
      quantity: 5
    },
    {
      id: 3,
      name: "Kullen",
      price: 4500,
      quantity: 1
    },
  ];

  return (
    <div>
      {products.map((p) => (
        <div key={p.id}>
          <button onClick={() => addItem(p)}>Add to cart</button>
        </div>
      ))}
    </div>
  );
}

function Cart() {
  const {
    isEmpty,
    totalUniqueItems,
    items,
    updateItemQuantity,
    removeItem,
  } = useCart();

  if (isEmpty) return <p>Your cart is empty</p>;

  return (
    <>
      <h1>Cart ({totalUniqueItems})</h1>

      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.quantity} x {item.name} &mdash;
            <button
              onClick={() => updateItemQuantity(item.id, (item.quantity ?? 0) - 1)}
            >
              -
            </button>
            <button
              onClick={() => updateItemQuantity(item.id, (item.quantity ?? 0) + 1)}
            >
              +
            </button>
            <button onClick={() => removeItem(item.id)}>&times;</button>
          </li>
        ))}
      </ul>
    </>
  );
}

function App() {
  return (
    <CartProvider>
      <Page />
      <Cart />
    </CartProvider>
  );
}
```

--------------------------------

### Getting Cart Items (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet demonstrates how to access the current list of items in the cart. It uses the `useCart` hook to destructure and retrieve the `items` array, which contains the objects representing the contents of the shopping cart.

```js
import { useCart } from "react-use-cart";

const { items } = useCart();
```

--------------------------------

### Getting Total Item Quantity (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet demonstrates how to get the total quantity of all items combined in the cart. It uses the `useCart` hook to destructure the `totalItems` variable, which provides an integer representing the sum of quantities of all unique items.

```js
import { useCart } from "react-use-cart";

const { totalItems } = useCart();
```

--------------------------------

### Getting a Specific Cart Item (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet demonstrates how to retrieve a single item from the cart based on its unique ID. It uses the `useCart` hook to get the `getItem` function, which takes an `itemId` string as a required argument and returns the corresponding item object if found.

```js
import { useCart } from "react-use-cart";

const { getItem } = useCart();

const myItem = getItem("cjld2cjxh0000qzrmn831i7rn");
```

--------------------------------

### Getting Total Unique Items (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet shows how to get the count of distinct item types in the cart. It uses the `useCart` hook to destructure the `totalUniqueItems` variable, which provides an integer representing the number of different items (regardless of their individual quantities).

```js
import { useCart } from "react-use-cart";

const { totalUniqueItems } = useCart();
```

--------------------------------

### Getting Cart Metadata (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet shows how to access any additional metadata associated with the cart. It uses the `useCart` hook to destructure the `metadata` variable, which provides an object containing data previously set using the `updateCartMetadata` function.

```js
import { useCart } from "react-use-cart";

const { metadata } = useCart();
```

--------------------------------

### Getting Cart Total Value (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet demonstrates how to retrieve the total monetary value of all items currently in the cart. It uses the `useCart` hook to destructure the `cartTotal` variable, which provides a numerical value representing the sum of (price * quantity) for all items.

```js
import { useCart } from "react-use-cart";

const { cartTotal } = useCart();
```

--------------------------------

### Checking if Item is in Cart (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet shows how to quickly determine if an item with a specific ID exists in the cart. It uses the `useCart` hook to get the `inCart` function, which accepts a required `itemId` string and returns a boolean (true if the item is in the cart, false otherwise).

```js
import { useCart } from "react-use-cart";

const { inCart } = useCart();

inCart("cjld2cjxh0000qzrmn831i7rn") ? "In cart" : "Not in cart";
```

--------------------------------

### Wrapping Application with CartProvider (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Demonstrates how to wrap your main application components with the `CartProvider` component from `react-use-cart`. This makes the cart state and functions accessible to any descendant component using the `useCart` hook.

```js
import React from "react";
import ReactDOM from "react-dom";
import { CartProvider } from "react-use-cart";

ReactDOM.render(
  <CartProvider>{/* render app/cart here */}</CartProvider>,
  document.getElementById("root")
);
```

--------------------------------

### Setting All Cart Items with setItems (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Illustrates how to use the `setItems` function from the `useCart` hook to completely overwrite the current items in the cart with a new array of product objects. Each object in the array must include an `id` and `price`.

```js
import { useCart } from "react-use-cart";

const { setItems } = useCart();

const products = [
  {
    id: "ckb64v21u000001ksgw2s42ku",
    name: "Fresh Foam 1080v9",
    brand: "New Balance",
    color: "Neon Emerald with Dark Neptune",
    size: "US 10",
    width: "B - Standard",
    sku: "W1080LN9",
    price: 15000,
  },
  {
    id: "cjld2cjxh0000qzrmn831i7rn",
    name: "Fresh Foam 1080v9",
    brand: "New Balance",
    color: "Neon Emerald with Dark Neptune",
    size: "US 9",
    width: "B - Standard",
    sku: "W1080LN9",
    price: 15000,
  },
];

setItems(products);
```

--------------------------------

### Clearing All Cart Items with emptyCart (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Demonstrates how to use the `emptyCart` function from the `useCart` hook to remove all items currently in the cart and reset the cart's total values to zero.

```js
import { useCart } from "react-use-cart";

const { emptyCart } = useCart();

emptyCart();
```

--------------------------------

### Adding a Single Item with addItem (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Shows how to use the `addItem` function from the `useCart` hook to add a single product object to the cart. If the item already exists (based on ID), its quantity will be incremented. An item object with `id` and `price` is required, and quantity defaults to 1.

```js
import { useCart } from "react-use-cart";

const { addItem } = useCart();

const product = {
  id: "cjld2cjxh0000qzrmn831i7rn",
  name: "Fresh Foam 1080v9",
  brand: "New Balance",
  color: "Neon Emerald with Dark Neptune",
  size: "US 9",
  width: "B - Standard",
  sku: "W1080LN9",
  price: 15000,
};

addItem(product, 2);
```

--------------------------------

### Setting Cart Metadata with setCartMetadata (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Illustrates how to use the `setCartMetadata` function from the `useCart` hook to replace the current custom global metadata object stored on the cart with a new object provided as an argument.

```js
import { useCart } from "react-use-cart";

const { setCartMetadata } = useCart();

setCartMetadata({ notes: "This is the only metadata" });
```

--------------------------------

### Updating Item Quantity with updateItemQuantity (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Shows how to use the `updateItemQuantity` function from the `useCart` hook to explicitly set the quantity of an item in the cart. It requires the item's ID and the new quantity value.

```js
import { useCart } from "react-use-cart";

const { updateItemQuantity } = useCart();

updateItemQuantity("cjld2cjxh0000qzrmn831i7rn", 1);
```

--------------------------------

### Updating Item Properties with updateItem (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Demonstrates how to use the `updateItem` function from the `useCart` hook to modify specific properties of an existing item in the cart. It takes the item's ID and an object containing the properties to update.

```js
import { useCart } from "react-use-cart";

const { updateItem } = useCart();

updateItem("cjld2cjxh0000qzrmn831i7rn", {
  size: "UK 10",
});
```

--------------------------------

### Clearing Cart Metadata with clearCartMetadata (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Shows how to use the `clearCartMetadata` function from the `useCart` hook to reset any custom global metadata stored on the cart back to an empty object.

```js
import { useCart } from "react-use-cart";

const { clearCartMetadata } = useCart();

clearCartMetadata();
```

--------------------------------

### Updating Cart Metadata with updateCartMetadata (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Demonstrates how to use the `updateCartMetadata` function from the `useCart` hook to merge a new object with the existing custom global metadata stored on the cart, allowing you to add or overwrite key-value pairs without replacing the entire object.

```js
import { useCart } from "react-use-cart";

const { updateCartMetadata } = useCart();

updateCartMetadata({ notes: "Leave in shed" });
```

--------------------------------

### Checking if Cart is Empty (react-use-cart) JavaScript

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

This snippet shows how to check if the cart currently contains any items. It uses the `useCart` hook to destructure the `isEmpty` boolean variable, which is true if the cart is empty and false otherwise.

```js
import { useCart } from "react-use-cart";

const { isEmpty } = useCart();
```

--------------------------------

### Removing an Item with removeItem (JavaScript)

Source: https://github.com/notrab/react-use-cart/blob/main/README.md

Illustrates how to use the `removeItem` function from the `useCart` hook to completely remove a specific item from the cart based on its unique ID.

```js
import { useCart } from "react-use-cart";

const { removeItem } = useCart();

removeItem("cjld2cjxh0000qzrmn831i7rn");
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.