Product Variants

@sushindustries/react-product-viewer

One model, several configurations, switched without reloading the asset - the GLB already holds them.

4 min read
View as MarkdownEdit on GitHub

Props

Accepts every prop of Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children">, plus:

PropTypeDefaultDoes
variantstring-The variant name, used as the accessible label.
label?string-Shown instead of the raw variant name.
swatch?string-Data URL from {@link useVariantSwatches}.
selected?booleanfalse
missing?booleanfalseThe asset does not carry this variant. Rendered as a visible state rather than hidden, because the failure this guards against is a control that looks like it works and does nothing.
className?string-Added after pv-variant.
showPendingSwatch?booleanfalseReserve the swatch's space while it renders. Swatches arrive an effect late, so without this a row of buttons shifts sideways the moment the pictures land.

Notes

Anything the types cannot say: which combinations are meaningless, which prop is ignored when another is set, and what it does when handed something it cannot render.

Uses@sushindustries/product-viewer@sushindustries/product-viewerRuntime material swapping and geometric zone tinting for a single GLB product. Framework-free.package