Skip to main content

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.

Getting the controller​

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

const controller = useProductSelection(configurator);

The controller reads and writes the productSelection store slice.

Example: syncing selection across the UI​

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

const controller = useProductSelection(configurator);

// React to the active product changing.
const unsubscribe = controller.subscribe(activeProductCid => {
    highlightProduct(activeProductCid);
});

// React to explicit "Configure" requests (e.g. from a 3D tooltip).
const unsubscribeConfigure = controller.subscribeConfigureRequest(() => {
    openProductsTab();
});

// Select a product.
controller.setActiveProductCid(productCid);

// Ask the UI to configure a product (also sets it active).
controller.requestConfigure(productCid);

// Teardown.
controller.clearActiveProductCid();
unsubscribe();
unsubscribeConfigure();

API​

activeProductCid​

The cid of the currently active product, or null. Read-only view of store state.

setActiveProductCid(productCid)​

Sets the active product (or clears it by passing null). Notifies subscribe listeners when the value changes.

clearActiveProductCid()​

Clears the active product. Equivalent to setActiveProductCid(null).

subscribe(callback)​

Subscribes to changes of activeProductCid. The callback receives the new string | null. Returns an unsubscribe function.

requestConfigure(productCid)​

Forwards a Configure-action request (e.g. from the 3D tooltip): sets the given product active and signals subscribeConfigureRequest listeners so the UI can react — for instance, activating the Products tab in the bundle composer.

subscribeConfigureRequest(callback)​

Subscribes to configure-request emissions. The callback fires on every requestConfigure call — including when the requested cid equals the currently active one. Returns an unsubscribe function.