Skip to main content

web-ui

React components for displaying Product Configuration, including GUI etc. You can use this just for testing, or in production if you feel that the default components fulfill your usability needs and that your customizations needs can be done using CSS overrides.

CSS (Default styling)

We provide a default styling to all components and to visually apply that you need to include the CSS in your code. In React this will look something like this:

import "@configura/web-ui/dist/css/web-ui.css";

Depending on your development stack you may need to handle the file properly. E.g. in Webpack matching .css with a proper loader such as css-loader may be required to properly load the file.

All of our CSS has been namespaces by using the prefix "cfg". This will make it easy for you to override the look and feel.

Tasks

tip

As of now there are only tasks for Export and Render to different formats. Export and Render requires Stage Pro. It is safe to leave the code in, it will simply not show any GUI.

TaskStartView.tsx

Shows a dropdown for starting tasks.

Example

<TaskStartView
    taskHandler={taskHandler}
    product={product}
    renderTaskParams={getRenderTaskParams}
    getPreviewUrl={dumpCanvasToImageDataUrl}
/>

taskHandler, required: TaskHandler instance which "owns" the tasks

product, required: CfgProduct on which a task is started

renderTaskParams, required if rendering to an image: Data such as width, height and FOV for rendering.

getPreviewUrl, optional: Callback that the TaskHandler can use to gain a thumbnail for the task started

TaskListView.tsx

Shows a list of running and finished tasks, including links for downloading the results.

Example

<TaskListView taskHandler={taskHandler} />

taskHandler, required: TaskHandler instance which "owns" the tasks

Product Information

ProductInformation.tsx

Show Product meta data, such as Price, Description, Name and Currency.

Example

<ProductInformation
    description={product.description}
    lang={product.lang}
    styleNr={product.styleNr}
    price={product.aggregatedPrice}
    topContent={<OptionalExtraComponentToTheTop />}
    bottomContent={<OptionalExtraComponentToTheBottom />}
/>

CfgProductConfigurationView.tsx

Use this to display an expandable tree view GUI for configuring a Product. If you want your users to be able to select color and such on your product this component is the easiest solution.

tip

If you are not using React or need to build your own GUI we recommend you base it on the CfgProduct-object or the CfgProductConfiguration-object. These convenience-classes take away much of the intricate parts of communicating with the API. If you want to use Additional Products you will need to use the CfgProduct-object.

Example

<CfgProductConfigurationView productConfiguration={productOrProductConfiguration} />

productConfiguration, required: A CfgProduct-object or a CfgProductConfiguration-object.

Price

CurrencyPrice.tsx

Use this to display a price with formatting and currency.

Example

<CurrencyPrice currency={currency} language={lang} price={price} fractionDigits={fractionDigits} />

currency, required

language, optional

price, required

fractionalDigits, required: rounding. Negative numbers are okay and can be used for instance for thousands rounding.

CfgPriceView.tsx

Like CurrencyPrice, but you can pass a CfgPrice object.

Example

<CfgPriceView price={price} lang={lang} />

price, required: A CfgPrice object.

lang, optional

Loading.tsx

Loading spinners, configurable to display full screen or covering its parent element.

Example

<Loading small={large or small} />
// A simple spinner

<CenteredLoading />
// A spinner with a "Loading"-label centered in the element

<OverlayLoading
    clickThrough={optional, allow clicks to pass through}
    fullWindow={optional, cover the entire browser window} />

// Shows an overlay with a spinner and a label covering either the parent element or the entire browser window. If clickThrough is enabled it will show as semi transparent.