Skip to main content

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.

Getting the controller​

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

const controller = useProductConfigurator(configurator);

Unlike the other hooks, this one is safe to call before the configurator has finished loading.

End-to-end example​

Wait until the configurator is ready, then start working with the rest of the API:

import {
  useProductConfigurator,
  useStoreProductOffers,
  ProductConfiguratorStatus,
} from "@expivi/product-configurator";

const controller = useProductConfigurator(configurator);

// One-time read
if (controller.status === ProductConfiguratorStatus.READY) {
  console.log("Already ready");
}

// React to future changes
const unsubscribe = controller.subscribeStatus(status => {
  if (status === ProductConfiguratorStatus.READY) {
    const products = useStoreProductOffers(configurator);
    console.log("Main product:", products.mainProduct);
  }
});

// Later, on teardown
unsubscribe();

API​

status​

Returns the current ProductConfiguratorStatus from the store. Use it for a one-time read when you do not need a subscription.

Possible values:

  • INIT
  • LOADING
  • LOADED
  • READY
  • ERROR
  • DESTROYED

subscribeStatus(callback)​

Subscribes to status changes. The callback receives the new ProductConfiguratorStatus whenever it changes. Returns an unsubscribe function you should call during cleanup.

const unsubscribe = controller.subscribeStatus(status => {
  console.log("Status changed to", status);
});

// Stop listening
unsubscribe();