Packages
react
providers
CartProvider

Cart Provider

The CartProvider component synchronizes the state of the Storefront API Cart and a customer's cart, and allows you to more easily manipulate the cart by adding, removing, and updating it. It could be placed at the root of your app so that your whole app is able to use the useCart() hook anywhere.

Usage

Here's a basic example of how you can use CartProvider and useCart in your application:

 
import React from 'react';
import ReactDOM from 'react-dom';
import { CartProvider, useCart } from '@airsoko/react;
 
const App = () => {
  return (
    <CartProvider>
      <ChildComponent />
    </CartProvider>
  );
};
const ChildComponent = () => {
  const cart = useCart();
 
  // Now you can access the cart object and manipulate it as needed
 
  return <div>Child Component</div>;
};
 
ReactDOM.render(<App />, document.getElementById('root'));

CartProvider Props

NameTypeDescription
childrenReactNodeAny ReactNode elements.
numCartLinesnumberMaximum number of cart lines to fetch. Defaults to 250 cart lines.
onCreate() => voidCallback invoked when the process to create a cart begins, but before the cart is created in the Storefront API.
onOrderCreate() => voidCallback invoked when the process to create the order begins, but before the order is updated in the Storefront API.
onLineAdd() => voidCallback invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API.
onLineRemove() => voidCallback invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API.
onLineUpdate() => voidCallback invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API.
onCartPrimaryAddressUpdate() => voidCallback invoked when the process to update cart primary address when the cart begins, but before the cart is updated in the Storefront API.
onNoteUpdate() => voidCallback invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API.
onBuyerIdentityUpdate() => voidCallback invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API.
onAttributesUpdate() => voidCallback invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API.
onDiscountCodesUpdate() => voidCallback invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API.
onCreateComplete() => voidCallback invoked when the process to create a cart completes.
onLineAddComplete() => voidCallback invoked when the process to add a line item to the cart completes.
onLineRemoveComplete() => voidCallback invoked when the process to remove a line item to the cart completes.
onLineUpdateComplete() => voidCallback invoked when the process to update a line item in the cart completes.
onCartPrimaryAddressUpdateComplete() => voidCallback invoked when the process to update a line item in the cart primary address update completes.
onNoteUpdateComplete() => voidCallback invoked when the process to add or update a note in the cart completes.
onBuyerIdentityUpdateComplete() => voidCallback invoked when the process to update the buyer identity completes.
onAttributesUpdateComplete() => voidCallback invoked when the process to update the cart attributes completes.
onDiscountCodesUpdateComplete() => voidCallback invoked when the process to update the cart discount codes completes.
onCartError(errors?: any) => voidCallback invoked when there is an error on a cart process.
dataPartialDeep<CartType, { recurseIntoArrays: true }> | undefinedAn object with fields that correspond to the Storefront API's Cart object.
cartFragmentstringA fragment used to query the Storefront API's Cart object for all queries and mutations. A default value is used if no argument is provided.
customerAccessTokenanyA customer access token that's accessible on the server if there's a customer login.
countryCodeCountryCodeThe ISO country code for i18n.

Notes

  • The useCart hook provides access to the cart object. It must be a descendant of a CartProvider component.

  • The CartProvider component synchronizes the state of the Storefront API Cart and a customer's cart, allowing manipulation of the cart by adding, removing, and updating it.

  • There are props that trigger when a call to the Storefront API is made, such as onLineAdd={} when a line is added to the cart.

  • There are also props that trigger when a call to the Storefront API is completed, such as onLineAddComplete={} when the fetch request for adding a line to the cart completes.

  • The useDelayedStateUntilHydration hook delays a state update until hydration finishes, useful for preventing suspense boundary errors when updating a context.

  • The storageAvailable function checks for storage availability, useful for handling localStorage or sessionStorage operations.