# useCart

Provides access to the cart object.

```jsx
import {CartProvider, useCart} from '@shopify/hydrogen-react';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

```

```tsx
import {CartProvider, useCart} from '@shopify/hydrogen-react';
import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types';

export function App() {
  <CartProvider
    onLineAdd={() => {
      console.log('a line is being added');
    }}
    onLineAddComplete={() => {
      console.log('a line has been added');
    }}
  >
    <CartComponent />
  </CartProvider>;
}

function CartComponent() {
  const {linesAdd, status} = useCart();

  const merchandise: CartLineInput = {merchandiseId: '{id-here}'};

  return (
    <div>
      Cart Status: {status}
      <button onClick={() => linesAdd([merchandise])}>Add Line</button>
    </div>
  );
}

```

## Props

`useCart` hook must be a descendent of a `CartProvider` component.

### UseCartDocs

#### Returns: CartWithActionsDocs
type UseCartDocs = () => CartWithActionsDocs;


### CartWithActionsDocs

### attributes

value: `Attribute[]`

The cart's attributes.

### buyerIdentity

value: `CartBuyerIdentity`

The cart's buyer identity.

### buyerIdentityUpdate

value: `(buyerIdenity: CartBuyerIdentityInput) => void`

A callback that updates the buyer identity in the cart. Expects the same `buyerIdentity` input that you would provide to the Storefront API's `cartBuyerIdentityUpdate` mutation.

### cartAttributesUpdate

value: `(attributes: AttributeInput[]) => void`

A callback that updates the cart attributes. Expects the same `attributes` input that you would provide to the Storefront API's `cartAttributesUpdate` mutation.

### cartCreate

value: `(cart: CartInput) => void`

A callback that creates a cart. Expects the same input you would provide to the Storefront API's `cartCreate` mutation.

### cartFragment

value: `string`

The fragment used to query the cart object for all queries and mutations.

### cartReady

value: `boolean`

A boolean indicating if the cart is ready to be interacted with.

### checkoutUrl

value: `string`

The checkout URL for the cart, if the cart has been created in the Storefront API.

### cost

value: `CartCost`

The cost for the cart, including the subtotal, total, taxes, and duties.

### discountCodes

value: `CartDiscountCode[]`

The discount codes applied to the cart.

### discountCodesUpdate

value: `(discountCodes: string[]) => void`

A callback that updates the cart's discount codes. Expects the same `codes` input that you would provide to the Storefront API's `cartDiscountCodesUpdate` mutation.

### error

value: `unknown`

If an error occurred on the previous cart action, then `error` will exist and `cart` will be put back into the last valid status it was in.

### id

value: `string`

The cart's ID if it has been created through the Storefront API.

### lines

value: `Array<CartLine | ComponentizableCartLine>`

The cart lines.

### linesAdd

value: `(lines: CartLineInput[]) => void`

A callback that adds lines to the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesAdd` mutation. If a cart doesn't already exist, then it will create the cart for you.

### linesRemove

value: `(lines: string[]) => void`

A callback that removes lines from the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesRemove` mutation. Only lines that are included in the `lines` parameter will be in the cart afterwards.

### linesUpdate

value: `(lines: CartLineUpdateInput[]) => void`

A callback that updates lines in the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesUpdate` mutation. If a line item is not included in the `lines` parameter, it will still exist in the cart and will not be changed.

### note

value: `string`

The cart's note.

### noteUpdate

value: `(note: string) => void`

A callback that updates the note in the cart. Expects the same `note` input that you would provide to the Storefront API's `cartNoteUpdate` mutation.

### status

value: `CartStatus`

The status of the cart. This returns `uninitialized` when the cart is not yet created, `creating` when the cart is being created, `fetching` when an existing cart is being fetched, `updating` when the cart is updating, and `idle` when the cart isn't being created or updated.

### totalQuantity

value: `number`

The total number of items in the cart, across all lines. If there are no lines, then the value is 0.

## Related

- [CartProvider](/api/hydrogen-react/components/CartProvider)