Use with React
This page shows how to integrate compose.up
with React for dynamic rendering of components managed by containers.
Example
const Logo = () => <img src={reactLogo} className='logo react' alt='React logo' />;
const logoContainer = createContainer({ id: 'logo', domain: 'assets', start: () => ({ api: { ui: Logo } }), enable: () => true,});
const layoutContainer = createContainer({ id: 'layout', domain: 'layouts', optionalDependencies: [logoContainer], start: (apis) => { const Layout = () => (apis.logo ? <apis.logo.ui /> : <code>no logo</code>);
createRoot(document.getElementById('root')!).render( <StrictMode> <h1>Hello</h1> <Layout /> </StrictMode>, );
return { api: { ui: Layout } }; },});
const { up } = await compose({ stages: [['app', [logoContainer, layoutContainer]]],});
await up();
Try it
Tip
This method works well for simple pages with few components. But if your app has many components inside each other, you might need more flexibility.
For this, you can use slots. React doesn’t have slots by default, but you can use them with the @grlt-hub/react-slots package.