Hooks Overview
The package exports these public use* helpers:
useProductConfigurator
useProductConfigurator returns the GlobalController, the lifecycle entrypoint for a configurator. Reach for it when you need to know whether the configurator is still loading or ready, so you know when it is safe to create the other controllers.
useMessages
useMessages returns the MessagesController, which manages the messages surfaced by the configurator: warnings, errors, and notices, both global and attribute-scoped. Reach for it when you want to read, display, add, or clear messages, or run their actions (such as reverting the last change).
useProductOffer
useProductOffer returns a ProductOfferController scoped to a single product offer (identified by its runtime cid). Reach for it when you need to read one product's data and attributes, subscribe to changes, serialize it, or lazily load its attributes and attribute values.
useStoreProductOffers
useStoreProductOffers returns the StoreProductOffersController, which exposes the entire product-offer collection at once. Reach for it when you need the main product, the sub-products, or want to look up, subscribe to, serialize, or parse the whole set of offers.
useProductSelection
Tracks which product in a bundle is currently "active" (selected for editing) and lets other parts of the UI react to selection and configure requests. Reach for it to coordinate selection state between a 3D viewer, a product list, and the bundle composer — for example, activating the Products tab when a user clicks "Configure" on a product in the 3D scene.
useAdjacentProducts
Helps you discover and highlight which bundle products can be attached ("connected") to a given product in a bundle configuration. Given a target product (and optionally specific connection offsets), it computes the set of compatible bundle attribute value candidates. Reach for it when building attach/connect UX — for example, highlighting valid drop targets or filtering an "add adjacent product" list.
useLayoutEntity
Use this hook when you need to read or drive a single layout entity in the configurator tree, for example to render a node, check its visibility, or switch which child is active. It looks up the entity by cid and, based on its rtti, returns the matching LayoutEntityController subclass.
useStoreLayouts
Reach for this hook when you need the full, flat collection of layout entities in the store, for example to build an index, search for a node, or react whenever any layout entity is added, removed, or changed. For working with a single entity, use useLayoutEntity.
useProductOfferLayout
Use this hook to get the layout for a product offer and turn it into a ready-to-render tree. It is the bridge between the flat list of layout entities assigned to a product and the nested LayoutNode[] structure your UI iterates over.
useStoreAttributes
useStoreAttributes returns a StoreAttributesController, the collection-level entrypoint for looking up, subscribing to, and (de)serializing every attribute in the store.
useAttribute
16 items
usePriceBreakdown
Gives you a live, itemized breakdown of the current configuration's price: base price, per-attribute charges, script-engine adjustments, and BOM costs, grouped and totalled. Reach for it when you want to render a "price details" panel that stays in sync as the user changes options.
useBomBreakdown
Gives you a live Bill of Materials (BOM) for the current configuration: the parts that make up the configured product, each with its components, quantities, prices, thumbnails, and attachments. Reach for it when you want to render a manufacturing/assembly breakdown that stays in sync as the user configures.
useVisualization2d
Drives a 2D image-based product visualization. On every settled configuration it re-evaluates the product's published 2D visualization, resolves each returned layer to an image URL, and exposes an ordered, composited layer stack. Reach for it when you want to render a live 2D preview by stacking transparent PNG layers.
useMediaService
Reach for useMediaService when you need to browse the Media Library from your own UI: listing image files and navigating the directory tree. It is a thin wrapper around the configurator's API service factory and configures ApiClient on first use with the configurator's apiBaseUrl and apiToken.
usePaletteService
Use usePaletteService to load the colors that belong to a color palette, for example to render a custom color picker. Like useMediaService, it returns a plain object of async methods and configures ApiClient on first use with the configurator's apiBaseUrl and apiToken.
useDownloadDesign
Use useDownloadDesign to let a shopper download a rendered file (a PDF by default) of their current configuration. It returns a DownloadDesignController that snapshots the configuration, requests generation on the backend, polls until the file is ready, and triggers the download.
useRequestQuote
Use useRequestQuote when a product is set up as an offer/quote request instead of a direct purchase. It returns a RequestQuoteController that loads the configured inquiry form, validates input, and submits the quote request (optionally with an email) along with a snapshot of the current configuration.