Skip to main content

Storefront SDK components and hooks

This is the inventory of the React and Vue UI libraries: every component and headless hook they export, grouped by domain. For how the libraries fit together and how to wire them up, see the Storefront SDK guides. Every React component below links to its props, and every hook links to its options and return type, on the package documentation sites. The TypeScript types in your editor show the same and always match the version you installed.

The React and Vue libraries expose the same components and the same hooks (composables in Vue), so the inventory below applies to both unless noted.

Packages​

LibraryPackageVersion
React@propeller-commerce/propeller-v2-react-ui0.19
Vue@propeller-commerce/propeller-v2-vue-ui0.18

Both build on propeller-v2-core-ui and propeller-sdk-v2. See Understanding the Storefront SDK for the full package set.

How to use them​

Install the library and the SDK, mount the providers once at your app root, then render any component or call any hook inside them. Components read the SDK services and the session from context. See UI components for the provider setup and entry points, and SDK services for the data layer.

Components​

Catalog and product​

Clusters​

Machines and spare parts​

  • MachineCard: card for a machine, a product that has orderable spare parts
  • MachineGrid: paginated grid of machines, the machine equivalent of ProductGrid

Grid and navigation​

Cart and checkout​

Orders and quotes​

Account, authentication and B2B​

Structured data​

  • ProductJsonLd, ClusterJsonLd, ItemListJsonLd: schema.org JSON-LD output for SEO. In React import them from @propeller-commerce/propeller-v2-react-ui/pure, in Vue from the package root

Hooks and composables​

Headless: they hold state and call the API but render nothing. Use them to build your own UI or to drive the components above. Hooks in React, composables in Vue, with the same names.

HookPurposeOptions and return type
useAuthLogin, registration and forgot-password flowsReact · Vue
useCartCart resolution, line items and action codesReact · Vue
useCheckoutCarriers, payment methods and placing an orderReact · Vue
useCompanyCompany switching and company data (B2B)React · Vue
useAddressAddress create, read, update and deleteReact · Vue
useOrdersOrder history search and detailReact · Vue
useFavoritesFavorite lists and list itemsReact · Vue
useMenuCategory navigation treeReact · Vue
useProductInfoSingle-product detail dataReact · Vue
useProductSearchCatalog search and filteringReact · Vue
useProductSliderCross-sell and up-sell slidersReact · Vue
useProductSpecsProduct attribute groups for spec tablesReact · Vue
useProductBundlesProduct bundle compositionReact · Vue
useMachinesMachines listing (a machine is a product with orderable spare parts)React · Vue
useSparePartsA machine's spare parts and child machinesReact · Vue
useClusterConfiguratorCluster selection stateReact · Vue
usePurchaseAuthorizationConfiguratorConfigure purchase authorization rules (B2B)React
usePurchaseAuthorizationRequestsReview and act on purchase authorization requests (B2B)React
useQuickOrderQuick order rows, product typeahead and bulk add to cartReact · Vue
useServicesRead the SDK services bundle from the providerReact · Vue

Finding props and options​

  • React components. Each name above links to its *Props type on the React documentation site.
  • Hooks and composables. The table above links each one to its Use*Options and Use*Return types, for React and for Vue.
  • Vue components. The Vue documentation site covers the composables but not the component props. For those, read the types that ship with the package: your editor shows them inline.

Whatever you read online, the types that ship with the package are the ones that match the version you installed.

This inventory was written against propeller-v2-react-ui 0.19.2 and propeller-v2-vue-ui 0.18.2.