Skip to main content

Type Alias: BlockGroupContainer

BlockGroupContainer = GenericContainer

Container for organizing block groups into hierarchical categories.

BlockGroupContainer extends GenericContainer to provide a specialized implementation for organizing block groups into logical, high-level categories. This creates a two-level hierarchy that enables complex products to structure their configuration options in an intuitive, scalable way.

Containers are purely organizational and are designed for custom UI implementations. They are not processed by the standard Mimeeq configurator interface, giving developers complete freedom to design navigation patterns that match their specific UX requirements and brand guidelines.

Common container categories include:

  • Product aspects: "Exterior", "Interior", "Performance", "Technology"
  • User journey stages: "Essential", "Comfort", "Premium", "Accessories"
  • Functional groupings: "Dimensions", "Materials", "Components", "Features"
  • Department-based: "IT Configuration", "Facilities", "Ergonomics"

Examples​

// Simple string-based container
const basicContainer: BlockGroupContainer = {
  containerName: "Interior Options",
  groupNames: ["seating", "dashboard", "entertainment"],
  containerId: "interior-container",
  value: ["seating-group-id", "dashboard-group-id", "entertainment-group-id"]
};
// Usage in a multi-level navigation component
function renderContainerNavigation(containers: BlockGroupContainer[]) {
  return containers.map(container => {
    const containerName = container.containerName;

    return (
      <AccordionSection key={container.containerId} title={containerName}>
        {container.value.map(groupId => (
          <GroupPanel key={groupId} groupId={groupId} />
        ))}
      </AccordionSection>
    );
  });
}