---
title: CartLineProvider
description: |2-

      The `CartLineProvider` component creates a context for using a cart line.
    
api_version: 2023-10
api_name: hydrogen-react
source_url:
  html: >-
    https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartlineprovider
  md: >-
    https://shopify.dev/docs/api/hydrogen-react/2023-10/components/cartlineprovider.md
---

# Cart​Line​Provider

The `CartLineProvider` component creates a context for using a cart line.

## Props

* children

  ReactNode

  required

  Any `ReactNode` elements.

* line

  CartLinePartialDeep

  required

  A cart line object.

### CartLinePartialDeep

```ts
CartLinePartialDeep
```

Examples

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```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>;
  }
  ```

  ##### TypeScript

  ```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>;
  }
  ```

## Related

[- useCartLine](https://shopify.dev/api/hydrogen-react/hooks/useCartLine)