# CartLineProvider


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

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


### CartLineProviderProps


### children

value: `ReactNode`

Any `ReactNode` elements.

### line

value: `CartLinePartialDeep`

A cart line object.

### CartLinePartialDeep


PartialDeep<
  CartLine | ComponentizableCartLine,
  {recurseIntoArrays: true}
>

## Related
- [useCartLine](/api/hydrogen-react/hooks/useCartLine)