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.

Getting the controller

import { useBomBreakdown } from "@expivi/product-configurator";

const controller = useBomBreakdown(configurator);

Like the price-breakdown controller, it listens to the product-rules engine and re-fetches (debounced) whenever the configuration settles. An initial fetch is scheduled if the configurator is already READY.

Example: listing BOM lines

import { useBomBreakdown } from "@expivi/product-configurator";

const controller = useBomBreakdown(configurator);

const unsubscribeData = controller.subscribe(bom => {
    if (!bom) {
        render("No BOM available");
        return;
    }

    for (const part of bom.parts) {
        renderPart({
            name: part.name ?? part.sku ?? part.identifier,
            quantity: `${part.quantity} ${part.uom}`,
            price: part.price != null ? formatMoney(part.price, bom.currency) : "-",
            thumbnail: part.thumbnailUrl,
            components: part.components.map(c => `${c.name ?? c.sku}: ${c.quantity} ${c.uom}`),
            attachments: part.attachments,
        });
    }
});

const unsubscribeBusy = controller.subscribeBusy(busy => toggleSpinner(busy));
const unsubscribeError = controller.subscribeError(error => {
    if (error) showError(error);
});

// On teardown:
unsubscribeData();
unsubscribeBusy();
unsubscribeError();
controller.destroy();

The BOM data shape:

• productCid — the main product's configuration id
• currency — currency code for the part prices
• parts — array of BOMPart. Each part has identifier, name, sku, quantity, uom, price, thumbnailUrl, an array of components (each BOMComponent with identifier, name, sku, quantity, uom, attachments), and its own attachments (each BOMAttachment with name and url).

API

data

The last-fetched BOM, or null before the first successful fetch or when there is no main product.

isBusy

true while a fetch is in flight.

error

The last error message, or null. Canceled requests are ignored.

subscribe(callback)

Registers a callback that fires with the new BOM | null on every update. Returns an unsubscribe function.

subscribeBusy(callback)

Subscribes to busy-state changes. Returns an unsubscribe function.

subscribeError(callback)

Subscribes to error changes (string | null). Returns an unsubscribe function.

refresh()

Forces an immediate fetch. Normally unnecessary since the controller refreshes automatically. Resolves once the fetch completes.

destroy()

Detaches the rules-engine subscription, clears any pending debounce, and drops all subscribers. Call it on unmount.