More Premium Hugo Themes Premium Nextjs Themes

React Commercejs Hooks

A library of React hooks that can be used to integrate Commerce.js and interface with the Chec Dashboard.

React Commercejs Hooks

A library of React hooks that can be used to integrate Commerce.js and interface with the Chec Dashboard.

Author Avatar Theme by chec
Github Stars Github Stars: 14
Last Commit Last Commit: Jan 11, 2022 -
First Commit Created: Aug 8, 2025 -
React Commercejs Hooks screenshot

Overview

The Commerce.js SDK offers an efficient way to integrate e-commerce functionalities into your applications using a context provider. By leveraging the CommerceContext, developers can easily access essential data from the Chec API, ensuring a streamlined user experience. This setup allows you to utilize various hooks for managing checkout processes effectively.

Setting up the SDK is straightforward, requiring only the wrapping of your components in the CommerceContext. With a few simple props, such as your Chec public key and debug options, you can get started quickly. The library also contains numerous hooks specifically designed for checkout, which can be implemented within a CheckoutProvider to enhance the e-commerce experience.

Features

  • CommerceContext: Essential for wrapping components to access the Commerce.js hooks and API data seamlessly.
  • useCommerce Hook: Provides access to Commerce.js functionality within any child component of the CommerceContext.
  • CheckoutProvider Component: Required to use checkout-related hooks, ensuring that components are correctly set up for e-commerce interaction.
  • useCheckout() Hook: Fetches the checkout token object, providing essential checkout data when available.
  • useAllCountries() Hook: Returns a comprehensive list of all supported countries by Commerce.js, facilitating international shipping setups.
  • useIsFree() Hook: Quickly checks whether a checkout is free of charge, returning a boolean for easy conditional rendering.
  • useLineItems() Hook: Supplies the line items present in the current checkout, giving insights into the customer’s selections.
  • useShippingOptions() Hook: Delivers available shipping options for a specified country and region based on the current checkout, enhancing the user experience.