Need to create a custom component with an area where users can drag in additional blocks? This post will guide you through creating one, building off of the <DynamicColumns> component in our react-design-system starter and using <BuilderBlocks> for the editing region.
Read more about the React design system example here
Open the react-design-system example in your code editor and navigate to src/components/. Let’s call our new component CustomColumns and create a folder for it. Add a file called CustomColumns.jsx then copy and paste the code from DynamicColumns.jsx . To make the <CardContent> area editable, replace the text component with <BuilderBlocks/> :
import { Image, BuilderBlocks } from '@builder.io/react';
...
<CardContent>
<BuilderBlocks
key={index}
child
parentElementId={props.builderBlock && props.builderBlock.id}
blocks={col.blocks}
dataPath={`component.options.columns.${index}.blocks`}
/>
</CardContent>
...
This is similar to how we implement fully customizable columns in Builder’s built-in Columns component.
Next we need to register the component. Create another file in CustomColumns/ called CustomColumns.builder.js and copy and paste the code from DynamicColumns.builder.js . Notice the list input type here which is what allows users to add more columns identical to the default column. Replace the default text inputs with blocks to make the area under the image dynamically editable.
import { Builder } from '@builder.io/react';
import { CustomColumns } from './CustomColumns';
Builder.registerComponent(CustomColumns, {
name: 'Custom Columns',
description: 'Example of a custom column with editing regions',
inputs: [
{
name: 'columns',
type: 'array',
defaultValue: [
{
image: 'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
blocks: [],
},
{
image: 'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
blocks: [],
},
],
subFields: [
{
name: 'image',
type: 'file',
allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
required: true,
defaultValue:
'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
},
{
name: 'blocks',
type: 'blocks',
hideFromUI: true,
helperText: 'This is an editable region where you can drag and drop blocks.',
},
],
},
],
});
Now we can test our new Custom Columns component in the visual editor and see that the area under the image is editable!
Additionally, we can add a default component to the blocks as a placeholder:
...
{
image:
'https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
blocks: [
{
'@type': '@builder.io/sdk:Element',
component: {
name: 'Text',
options: {
text: 'Enter some text...',
},
},
},
],
},
...
View the full code for the Custom Columns component here: