use
component
The hook provides access to the CartLine object from the Storefront API. It must be a descendent of a component.
Anchor to useCartLineuse
use
must be a descendent of a component.
CartLinePartialDeep
PartialDeep<
CartLine | ComponentizableCartLine,
{recurseIntoArrays: true}
>
UseCartLineGeneratedType
The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/2025-01/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
CartLinePartialDeepexport 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}
>Was this section helpful?
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>;
}
examples
Example code
description
I am the default example
JavaScript
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
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>; }
