Skip to content

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.