Skip to main content

useAttribute Overview

useAttribute looks at an attribute's runtime type and returns the matching controller subclass, so you get type-appropriate behavior without building the controller yourself.

Getting the controller​

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

const attribute = useAttribute(configurator, attributeCid);

The attributeCid is the runtime cid of the attribute you want to control. If no attribute with that cid exists, or its runtime type is unknown, the hook throws an error with the attribute's identification details.

End-to-end example​

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

const attribute = useAttribute(configurator, attributeCid);

if (attribute.isVisible) {
  // React to changes for this attribute
  const unsubscribe = attribute.subscribe(next => {
    console.log("attribute changed", next.identifier);
  });

  // ...later, when you no longer need updates
  unsubscribe();
}

Returned controller types​

useAttribute routes to one of these concrete subclasses based on the attribute's runtime type:

  • StaticNumberAttributeController
  • StaticStringAttributeController
  • ConfigurableBooleanAttributeController
  • ConfigurableListAttributeController
  • ConfigurableNumberAttributeController
  • ConfigurableStringAttributeController
  • Web2PrintModifierAttributeController
  • Web2PrintArtworkAttributeController
  • Web2PrintTextAttributeController
  • Web2PrintGradientAttributeController
  • Web2PrintImageAttributeController
  • Web2PrintCanvasAttributeController
  • Web2PrintColorAttributeController
  • BundleProductAttributeController

How to read this section​

  • Common Attribute API documents the base AttributeController members shared by every controller above.
  • Each type page documents only the behavior specific to that attribute family.

If you need type-specific methods, narrow by your application's knowledge of the attribute kind and then call the matching controller API.

Every subscribe(...) call returns an unsubscribe function. Call it when the controller is no longer needed to avoid leaking store subscriptions.