# useCart Provides access to the cart object. ### Example code ```jsx import {CartProvider, useCart} from '@shopify/hydrogen-react'; export function App() { <CartProvider onLineAdd={() => { console.log('a line is being added'); }} onLineAddComplete={() => { console.log('a line has been added'); }} > <CartComponent /> </CartProvider>; } function CartComponent() { const {linesAdd, status} = useCart(); const merchandise = {merchandiseId: '{id-here}'}; return ( <div> Cart Status: {status} <button onClick={() => linesAdd([merchandise])}>Add Line</button> </div> ); } ``` ```tsx import {CartProvider, useCart} from '@shopify/hydrogen-react'; import type {CartLineInput} from '@shopify/hydrogen-react/storefront-api-types'; export function App() { <CartProvider onLineAdd={() => { console.log('a line is being added'); }} onLineAddComplete={() => { console.log('a line has been added'); }} > <CartComponent /> </CartProvider>; } function CartComponent() { const {linesAdd, status} = useCart(); const merchandise: CartLineInput = {merchandiseId: '{id-here}'}; return ( <div> Cart Status: {status} <button onClick={() => linesAdd([merchandise])}>Add Line</button> </div> ); } ``` ## Props `useCart` hook must be a descendent of a `CartProvider` component. ### UseCartDocs #### Returns: CartWithActionsDocs type UseCartDocs = () => CartWithActionsDocs; ### CartWithActionsDocs ### attributes The cart's attributes. ### buyerIdentity The cart's buyer identity. ### buyerIdentityUpdate A callback that updates the buyer identity in the cart. Expects the same `buyerIdentity` input that you would provide to the Storefront API's `cartBuyerIdentityUpdate` mutation. ### cartAttributesUpdate A callback that updates the cart attributes. Expects the same `attributes` input that you would provide to the Storefront API's `cartAttributesUpdate` mutation. ### cartCreate A callback that creates a cart. Expects the same input you would provide to the Storefront API's `cartCreate` mutation. ### cartFragment The fragment used to query the cart object for all queries and mutations. ### cartReady A boolean indicating if the cart is ready to be interacted with. ### checkoutUrl The checkout URL for the cart, if the cart has been created in the Storefront API. ### cost The cost for the cart, including the subtotal, total, taxes, and duties. ### discountCodes The discount codes applied to the cart. ### discountCodesUpdate A callback that updates the cart's discount codes. Expects the same `codes` input that you would provide to the Storefront API's `cartDiscountCodesUpdate` mutation. ### error If an error occurred on the previous cart action, then `error` will exist and `cart` will be put back into the last valid status it was in. ### id The cart's ID if it has been created through the Storefront API. ### lines The cart lines. ### linesAdd A callback that adds lines to the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesAdd` mutation. If a cart doesn't already exist, then it will create the cart for you. ### linesRemove A callback that removes lines from the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesRemove` mutation. Only lines that are included in the `lines` parameter will be in the cart afterwards. ### linesUpdate A callback that updates lines in the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesUpdate` mutation. If a line item is not included in the `lines` parameter, it will still exist in the cart and will not be changed. ### note The cart's note. ### noteUpdate A callback that updates the note in the cart. Expects the same `note` input that you would provide to the Storefront API's `cartNoteUpdate` mutation. ### status The status of the cart. This returns `uninitialized` when the cart is not yet created, `creating` when the cart is being created, `fetching` when an existing cart is being fetched, `updating` when the cart is updating, and `idle` when the cart isn't being created or updated. ### totalQuantity The total number of items in the cart, across all lines. If there are no lines, then the value is 0. ### CartStatus CartState['status'] ### CartState {status: 'uninitialized'; error?: string} | {status: 'fetching'} | {status: 'creating'} | {status: 'updating'; cart: Cart; lastValidCart: Cart} | {status: 'idle'; cart: Cart; error?: string} ### Cart PartialDeep<CartBase, {recurseIntoArrays: true}> ## Related - [CartProvider](/api/hydrogen-react/components/CartProvider)