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.

Example code

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

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/2024-10/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; }

CartLinePartialDeep

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