When building a headless configurator project, this library allows you to create a connection to your Combeenation configurator and interact with it by reading component values, writing component inputs, subscribing to component value changes and more.
npm install @combeenation/client
Whilst this example is demonstrating basic usage with React, the library can be used with any framework or even vanilla JS.
// See our docs for information on what this is and where to get this file from:
// https://docs.combeenation.com/docs/custom-code#update-component-typings
import { Amount, TotalPrice } from './generated/cfgr-defs.generated';
import { CombeenationClient } from '@combeenation/client';
function Configurator() {
const cfgrClient = useRef<ConfiguratorClient>();
const [amount, setAmount] = useState<number>();
const [totalPrice, setTotalPrice] = useState<number>();
useEffect(() => {
if (!cfgrClient.current) {
const client = new ConfiguratorClient();
cfgrClient.current = client;
const connectionOptions = {
companyName: 'YourCompanyName',
configuratorName: 'YourConfiguratorName',
};
client.connect(connectionOptions).then(() => {
Amount.onValueChanged(setAmount, true);
TotalPrice.onValueChanged(setTotalPrice, true);
});
}
}, []);
const onAmountChanged = (e: React.ChangeEvent<HTMLInputElement>, updateComponentInput: boolean) => {
const value = parseInt(e.target.value);
if (!isNaN(value)) {
setAmount(value);
if (updateComponentInput) {
Amount.setInput(value);
}
}
};
return (
<main>
<label>
Amount:
<input value={amount ?? ''} onChange={e => onAmountChanged(e, false)} onBlur={e => onAmountChanged(e, true)} />
</label>
<div>Total price: {totalPrice}</div>
</main>
);
}
For more detailed API documentation see https://configurator-client.docs.combeenation.com/.
Expect more information to come or contact support if you have any questions.