Skip to main content

foundation-layout.componentfactory

Home > @genesislcap/foundation-layout > ComponentFactory

ComponentFactory type​

Factory function for creating component instances in the layout.

Signature:

export type ComponentFactory = (container: HTMLElement) => void | (() => void);

Remarks​

This is the recommended approach for framework-rendered components (React, Angular, Vue, etc.) because it allows each layout instance to create a fresh component rather than cloning existing DOM elements (which loses event listeners and framework bindings).

The factory function receives a container element and should render the component into it. Optionally, it can return a cleanup function that will be called when the component is removed from the layout.

Example 1​

React example:

layout.registerItem('my-component', (container) => {
  const root = createRoot(container);
  root.render(<MyComponent />);
  return () => root.unmount();
});

Example 2​

Angular example:

layout.registerItem('my-component', (container) => {
  const componentRef = createComponent(MyComponent, {
    environmentInjector: this.injector,
    hostElement: container
  });
  return () => componentRef.destroy();
});