useDesignEngine

The useDesignEngine hook is used to get the DesignEngine provided by the DesignEngine context. Since useDesignEngine throws an error if there is no DesignEngine provided, you can use it in your components without having to check if the value exists first. This is useful if your design experience assumes a DesignEngine always exists.

import { DesignEngineProvider, useDesignEngine } from '@design-stack-ct/design-engine-react-components'

export function CustomDesignPanels() {
    const designEngine = useDesignEngine();

    return (
        {designEngine.panels.map((panel) => /* Some custom component consuming panels */)}
    );
}

export function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(() => new DesignEngine(...));

    return (
        <DesignEngineProvider designEngine={designEngine}>
            <CustomDesignPanels />
        </DesignEngineProvider>
    );
}