Gatsby - Custom Components

Hello there,
I created the gatsby-react project from builder/packages/gatsby at main · BuilderIO/builder · GitHub. I automatically integrate my designs with Graphql in Builder.io.
However, I want to integrate the React-typescript custom component I wrote for the Landing Page, independent of builder.io. The project I’m building is listening to the API. How is it integrated?

Are you looking to have a .tsx file as part of this project? If that is the case you will need to create a tsconfig and add that as part of a build step to get jsx out. Otherwise you could run tsc manaully on that file and just snag the exported jsx version.

To give a simple example, I will create a component. Inside the component, there is the text hello. It also shows this text on other pages I’ve designed. I want it to belong to only one page. If I do this will I break the build on the auto API?
My understanding is that even if I add this as part of the compiler step, the designs for this component will show up everywhere.

Thanks for sharing that @CodingCatDev! If using Typescript with Gatsby, we also have this minimal starter you could refer to for setup. builder/examples/gatsby-minimal-starter at main · BuilderIO/builder · GitHub

Hello @jeagerjaquez! You can register your custom component with Builder to import it into the visual editor. Take a look at the sample <Hero> component in the gatsby-starter-builder example to see how you can accomplish this. Then in your Builder space go to the content page where you need it and drag and drop where you like. Hope this helps!

Read more about using custom components in Builder.io here

Oh. I didn’t know I had to save components to Builder. Thanks.

1 Like