How do I register custom components for only certain models?

Technical Questions
1

If you want to use custom components in Builder and have some of those components only show in the editor for certain models, you can do that by writing a custom register function in your codebase:

import { Builder, builder } from '@builder.io/react';
export function registerComponentForModel(component: any, config: any, models: string[]) {
  if (Builder.isEditing || Builder.isPreviewing) {
    if (models.includes(builder.editingModel!)) {
      Builder.registerComponent(component, config);
    }
  } else {
    Builder.registerComponent(component, config);
  }
}

What this function does is look to see if Builder is in editing mode, and if so it makes sure that the current model matches the list of allowed models. Let’s say for instance I only want my custom ProductView component to be available in the editor for the product-page-template model and the product model. What I can do is use the above function in the code where I register the custom component like this:

registerComponentForModel(ProductView, { ... config }, ['product-page-template', 'product'])