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.

Getting the controller

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

const controller = useLayoutEntity(configurator, layoutCid);

The returned subclass is chosen by the entity type, but every subclass inherits the same public API from LayoutEntityController. The concrete types you may get back are:

• Static: StaticImageLayoutEntityController, StaticSectionLayoutEntityController, StaticStepLayoutEntityController, StaticTextLayoutEntityController, StaticStringLayoutEntityController, StaticNumberLayoutEntityController, StaticGroupedAttributesLayoutEntityController
• Attribute: AttributeBooleanLayoutEntityController, AttributeListLayoutEntityController, AttributeNumberLayoutEntityController, AttributeStringLayoutEntityController
• Web2Print: Web2PrintArtworkLayoutEntityController, Web2PrintCanvasLayoutEntityController, Web2PrintColorLayoutEntityController, Web2PrintGradientLayoutEntityController, Web2PrintImageLayoutEntityController, Web2PrintModifierLayoutEntityController, Web2PrintTextLayoutEntityController
• Bundle: BundleProductLayoutEntityController

If the cid does not resolve to an entity, the hook throws.

Example

Render a node only when it is visible, list its children, and let the user pick one:

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

const controller = useLayoutEntity(configurator, layoutCid);

if (controller.isVisible) {
    console.log("title", controller.data.config);

    controller.children.forEach(child => {
        console.log("child", child.cid);
    });

    // activate the first child (e.g. open a step or section)
    const [first] = controller.children;
    if (first) {
        controller.setActiveChild(first.cid);
    }
}

// re-render whenever this entity changes
const unsubscribe = controller.subscribe(() => {
    console.log("layout entity updated");
});

// later, when the component unmounts
unsubscribe();

API

data

Returns the typed layout entity for this cid. Throws if the entity is missing.

parent

Returns the parent layout entity (resolved via parentId). Throws if there is no resolvable parent.

children

Returns all direct child layout entities.

isVisible

Returns true only when the entity's own visibility flag is set and its linked attribute (if any) is also visible. Entities without a linked attribute are considered attribute-visible.

subscribe(callback)

Subscribes to changes of this specific layout entity. Returns an unsubscribe function; call it when your component tears down.

const unsubscribe = controller.subscribe(entity => { /* ... */ });
unsubscribe();

subscribeToState(selector, callback)

Low-level escape hatch to subscribe to any projection of the global configurator state, for cases where your logic depends on more than this one entity. Returns an unsubscribe function.

const unsubscribe = controller.subscribeToState(
    state => state.layoutEntity.data.length,
    () => console.log("layout list changed"),
);

setActiveChild(cid, toggle = true)

Marks one child as active and keeps sibling state consistent:

• Sets the parent's activeChild to the given cid.
• Flips the previously active child to active: false and the new one to active: true.
• When toggle is true and the same child is selected again, the active child is cleared (null).

Pass cid as null to clear the active child explicitly.

Subclass extras

Most subclasses are type markers only. The one exception today is:

showTitle (StaticStepLayoutEntityController)

Returns whether the step's title should be rendered. It honors config.displaySettings.showTitle, but a false value is only respected when the parent section's displayType is "flat".