# How do I register custom components for only certain models?

**URL:** <https://forum.builder.io/t/how-do-i-register-custom-components-for-only-certain-models/434>\
**Category:** Technical Questions\
**Created:** [January 29, 2021, 8:02pm UTC](https://forum.builder.io/t/how-do-i-register-custom-components-for-only-certain-models/434 "2021-01-29T20:02:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![korey](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/korey/32/12_2.png) [@korey](https://forum.builder.io/u/korey)\
**Post date:** [January 29, 2021, 8:02pm UTC](https://forum.builder.io/t/how-do-i-register-custom-components-for-only-certain-models/434/1 "2021-01-29T20:02:06Z")

</div>

If you want to use [custom components](https://www.builder.io/c/docs/custom-react-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'])`