# useCartLine


    The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
  

```jsx
import {CartLineProvider, useCartLine} from '@shopify/hydrogen-react';

export function CartWrapper({cart}) {
  const firstCartLine = cart.lines.nodes[0];
  return (
    <CartLineProvider line={firstCartLine}>
      <CartLineQuantity />
    </CartLineProvider>
  );
}

function CartLineQuantity() {
  const cartLine = useCartLine();

  return <div>{cartLine.quantity}</div>;
}

```

```tsx
import {CartLineProvider, useCartLine} from '@shopify/hydrogen-react';
import type {Cart} from '@shopify/hydrogen-react/storefront-api-types';

export function CartWrapper({cart}: {cart: Cart}) {
  const firstCartLine = cart.lines.nodes[0];
  return (
    <CartLineProvider line={firstCartLine}>
      <CartLineQuantity />
    </CartLineProvider>
  );
}

function CartLineQuantity() {
  const cartLine = useCartLine();

  return <div>{cartLine.quantity}</div>;
}

```

## Props

`useCartLine` must be a descendent of a `CartProvider` component.

### UseCartLineGeneratedType

The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.

#### Returns: CartLinePartialDeep
export function useCartLine(): CartLinePartialDeep {
  const context = useContext(CartLineContext);

  if (context == null) {
    throw new Error('Expected a cart line context but none was found');
  }

  return context;
}


## Related

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