foundation-layout.foundationlayout.registeritem

Home > @genesislcap/foundation-layout > FoundationLayout > registerItem

FoundationLayout.registerItem() method

Register a collection of Element or a factory function and associate them with an ID with the layout system for later use.

Signature:

registerItem(registration: string, elementsOrFactory: Element[] | ComponentFactory): string;

Parameters

Parameter	Type	Description
registration	string	string of the registration ID
elementsOrFactory	Element[] | ComponentFactory	Either Elements[] containing the reference to the elements to register, or a ComponentFactory function

Returns:

string

• string defining the name of the registered item with the layout system (config.id if set).

Exceptions

LayoutUsageError if you attempt to add an item before the layout has been initialised.

LayoutRegistrationError if you attempt to use a registration name which is already in use (declarative html API and JavaScript API registrations use the same "pool" of registration names).

Remarks

You can register either an array of elements or a factory function.

**Element registration**: Use this to register elements that you later want to load when using FoundationLayout.loadLayout(). Use FoundationLayout.layoutRequiredRegistrations() to see what components need to be registered for a certain config and then register them using this function before calling FoundationLayout.loadLayout(). When registering an element it is moved by reference into the internals of the layout, so if you pass elements already in the DOM then they will disappear. If you want to avoid this you can pass copies using element.cloneNode(true).

**Factory registration**: 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 will be called each time a new instance of the component is needed. It 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

Element registration:

const div = document.createElement('div');
div.innerHTML = '<h1>Hello</h1>';
layout.registerItem('my-element', [div]);

Example 2

Factory registration (React):

layout.registerItem('text-field', (container) => {
  const root = createRoot(container);
  root.render(<TextFieldComponent />);
  return () => root.unmount();
});