useAvailableDesignEngine

The useAvailableDesignEngine hook is used to get the DesignEngine provided by the DesignEngine context. It will return the DesignEngine if it exists, or undefined if it has not yet been provided. This capability can be used to asynchronously initialize the design engine while showing loading state on your child components.

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

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

    if (!designEngine) {
        return <div>Loading...</div>;
    }

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

export function CustomDesignExperience() {
    const [designEngine, setDesignEngine] = useState(undefined);

    useEffect(() => {
        someAsyncCall().then((result) => {
            setDesignEngine(new DesignEngine(...));
        });
    }, []);

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