Live Demo 👉 All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
☰
Use Cases
Pricing
Blog
×
Visual CMS
Drag-and-drop visual editor and headless CMS for any tech stack
Theme Studio for Shopify
Build and optimize your Shopify-hosted storefront, no coding required
Resources
Blog
Get StartedLogin☰
Custom Components
How to drag and drop to build pages visually with your React components
September 23, 2021
Written By Kapunahele Wong
If you're using Builder.io to visually develop apps using drag-and-drop, you can use your custom React components to tailor visual components for your team.
With your custom components in Builder, you can create any component your team needs, configure options for variability, and your teammates can use and reuse your components throughout the app. Freeing up developer time while giving non-coding team members the flexibility to iterate and publish on their own increases efficiency and encourages creativity across the team.
Tip: For the most up-to-date content on using custom components in Builder, check out the official documentation on Integrating Custom Components.
Goals
This tutorial shows you how to integrate your custom React components in the following three steps:
- Create a custom React component
- Register your component with your Builder app
- Use your new component in Builder's drag and drop editor
👉Tip:This post builds upon our previous blog post Setting up visual drag-and-drop page building with Next.js.
If you haven't gone through that tutorial, you can download the finished Next.js application on GitHub, but you'll need to configure Builder and your application to see each other. You might also want to set up a default page, all of which the previous article covers.
Creating a custom React component
In the root of your project, create a folder called components.
Inside the components directory, create a file called heading.tsx.
Paste the following code into heading.tsx and save.
Let's cover what each piece of code does. The first line imports builder.io/react, which this app needs to register the component.
The next line exports the Heading component so it's available for import elsewhere in our app. The heading uses two props, or properties, color and title in an h1.
The next section is where you register your custom component with builder.registerComponent().
With builder.registerComponent(), you configure your component. First, you give it a name, here Heading. You declare your props in an inputs array.
We have two props. The first is a title with a type of text and a default value of "I am a heading!". The second prop is color, with a type of color and a default value of black.
What you configure in builder.registerComponent() is what shows up in Builder.
Importing your custom component
In [[...page]].tsx, import your new custom component.
If you don't have a [[...page]].tsx, you can grab the code from GitHub, or head over to the first article in this series, Setting up visual drag-and-drop page building with Next.js, where you'll find the code and an explanation of what it does.
Using your component in Builder
Log into Builder and open the space that you have connected to your app. If you need some guidance on how to configure your app and Builder to see one another, see Setting up visual drag-and-drop page building with Next.js.
In your Builder space, click the Content icon:
Choose a page. The following example shows the about page, but you can select any page you have, or create a new one.
When you're in the page, click the Show More button that's within the Insert panel. The Insert panel opens by default when you load a page, so you should already be there.
Show More displays a section called Code Components where we see our custom Heading component.
Drag and drop the Heading component to the working area. As soon as you drop, the header copy you created in your app shows up.
If you click Edit, you can change the heading to be whatever you like.
👉 Tip: To see your work on localhost, you have to configure Builder by pointing to a page that has a <BuilderComponent /> on it and your components registered. For step-by-step instructions on configuring Builder to use localhost, checkout the Getting your API Key and setting your URL section of that article.
On the right of the screen, the Options panel contains the inputs or props we told Builder about in builder.registerComponent(). The panel includes the title and color along with their default values.
If you click on the color block and choose another color from the picker, the h1 changes color.
If you click on the color block and choose another color from the picker, the h1 changes color.
Putting it all together
The following image shows how the code corresponds to what's in Builder's UI. Everything we declared in builder.registerComponent() is present in the Insert and Options panels. The name "Heading" along with our inputs, and even our default values populate the Builder interface.
To see your component in the browser, click the green Publish button in the upper right of the browser and being sure you're serving your app locally, go to localhost/your page . In this example, we've used the about page, so we go to http://localhost:3000/about.
Next steps–iteration, here we come!
Builder has a lot of other inputs you can configure in your custom component. Check out Input Types in Builder for a comprehensive list.
Share
