How to add custom components to custom models

Technical Questions
, ,
1

Hey!

I created a custom component using React, and it appears in my Page model editor, although I would like to use this custom component inside one of my custom model. How can I do this?

image
I want to reuse this navigation dropdown inside my custom model, but I can not find it
(I tried a workaround to save it as template but nothing, blank)

image

...
export default NavSubMenu

Builder.registerComponent(NavSubMenu, {
  name: 'Navigation dropdow',
  inputs: [
    {
...

I thought It should be visible not only for my page model but for every model

This would be very important, please help and let me know!

2

@steve @maddy @TimG
I am building in production, I don’t want to rush you, just maybe my question got out of sight, that’s why I tagged you.

Please let me know how can I see my custom react components inside my custom models.
Thanks for your great help, we really appreciate it!

3

Thanks for the question!
I would be interested in the resolution as well!

Thanks in advance!

4

Hey @radikris - what is the preview URL of the custom model? Is it connected to your codebase on a route that registers those components?

The most common culprit for components not showing up is using the wrong preview URL, e.g. the default one or anything else that doesn’t “see” your component be registered (aka doesn’t register the component or import a file that does)

2 Likes
5

Hey @steve
For example I have this: Builder

But in the dropdown lists my custom component not showing up:

image
image336×732 18.7 KB

I made this custom react component eg:

image
image906×586 26.3 KB

And I would like to use it in later in every single custom model which I will make in the future, I imported in the main index.js

image
image755×754 35 KB

But this is only available in my ‘Page’ model, what should I do with my ‘section-test’ preview url that my ‘Code block vercel’ component will be available in there? (shortly, in every custom models as well)
Please let me know, I think I kind of misunderstand something with this register function.

In the documentation:
/**

  • Passing a list of model names will restrict using the component to only the models listed here, otherwise it’ll be available for all models
    */
    That’s why I thought it should be visible in every model by default.
    My public Builder API_KEY if you want to checkout: 29ac5503f46b4b0ea80336edf8478e24
6

Ah yes, so the key thing is you need to make sure you have a way to edit your custom section on your site where your components are available. One common pattern people use us to make a simple page for Builder editing of sections, like

// Import where you registered Builder components
import './my-builder-registered-components'

// pages/builder-editing.jsx
export default function BuilderEditing() {
  const queryParams = useRouter().query;
  return <BuilderComponent model={queryParams.model) />
}

And then set the preview URL for that model to be like

https://your-site.com?model=test-section

So that way when using the Builder editor you are editing on your site where your components are registered

7

Thank you very much for your help, but I think you answered me a different question.

I don’t want to use BuilderComponent in my code, I only want to upload my custom component (MyCustomComponent), which is working but ONLY for the ‘Page’ model. But here it works great, I can see it from the dropdown menu.

I want to create a custom model, a Symbol, and I want to drag and drop my previously created MyCustomComponent with drag and drop, but none of my custom components are showing up in the menu, why is it happening?
(How can Custom models editor see custom components, the same as on the ‘Page’ model??

Hope you can understand my question now.

8

Hey @radikris - if you don’t do a setup like my suggestion above, you won’t see your custom components when editing custom models like symbols, custom sections, etc. What is the preview URL you are using for your custom sections, like symbols? E.g. if you go to builder.io/models then choose “symbol”, what is the value for “editing URL”?

9

its the default one:

image
image1722×1008 82.1 KB

I guess then it is not the correct approach, can you please tell again what should I do to be able to see my custom components in this custom model as well

10

Okey, I set the preview url: http://localhost:3000?model=symbol, and it shows me my home page, but I would like to get a simple blank page where I can build a custom symbol from scratch

11

Perfect - yeah that is what I am getting at. If Builder is using the default page for editing, it is not connected to your site or components. So Builder needs to point to a page that has a <BuilderComponent /> on it and your components registered. So, a simpler example would be

  1. Create a new file in your project /pages/edit-builder-symbol.jsx with:
import { BuilderComponent } from '@builder.io/react';

// import where your custom components are registered
import './wherever-you-register-builder-components'

// This page is purely for using the Builder.io editor to edit symbols
export default function EditBuilderSymbol() {
  return <BuilderComponent model="symbol" />
}
  1. Then update your Editing URL for the symbol model to http://localhost:3000/edit-builder-symbol and save it

Now, when using the drag + drop editor for symbols, its going to hit your local site where your components are

Lmk if that helps explain ^

12

Omg, it works like a charm, thank you very much for your help!
Very appreciate it @steve , best wishes, keep it up the good work!:slight_smile:

2 Likes