In addition to using your own unique custom components with Builder, you can tailor built-in components by overriding them with your own component. You can extend, limit. or otherwise tweak built-in components so that your team has exactly what they need to build projects.
To override Builder's built-in components, you should already be familiar with the following:
You can override Builder-provided components by registering a custom component with the same name. By overriding a component, you can add extra features to Builder's built-in blocks and change their behavior.
The following example demonstrates how to replace Builder's default Image block.
To override Builder's built-in components, take the following steps:
- Using
Builder.registerComponent(), register a component with the same name as the component in Builder that you'd like to override. - Set the
overrideproperty totrue - Add an
inputsarray with each input you want your component to have.
// MyImage.jsx
Builder.registerComponent(MyImage, {
// Provide the name of the built-in Builder component
// that you want to override.
name: 'Image',
// Signify that this is an override
override: true,
inputs: [
// Add your own input fields.
{ name: 'myInput', ... },
// Copy/paste the original component's inputs
// from Builder's React SDK if you also want to
// retain the original fields.
{ name: 'image', type: 'file', ... },
],
...
})Tip: If you have a prop you'd like to make editable in the Visual Editor, be sure to define a input for it. In this example, name is editable because it is specified in the inputs array of registerComponent().
Check out the full reference docs for registerComponent() options for more details.
As you create more custom components for Builder, be sure to read Versioning Custom Components to learn how to version and deprecate components.
For information on the code for the default components within the Builder Visual Editor, which can help you when overriding them, read the Built-in Component API Reference.
