Cart
component
The component creates a context for using a cart line.
Anchor to propsProps
- Anchor to childrenchildrenReactNoderequired
Any
elements.- Anchor to linelinerequired
A cart line object.
CartLineProviderProps
- children
Any `ReactNode` elements.
ReactNode - line
A cart line object.
CartLinePartialDeep
{
/** Any `ReactNode` elements. */
children: ReactNode;
/** A cart line object. */
line: CartLinePartialDeep;
}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>; }
