I’m trying to modify the standard Columns component from builder using override feature but one thing that I noticed is that I can’t include the Column layouts input present in the default Column component.
what I’m trying to achieve is give the user the ability to choose the column layout based on the breakpoint as well as having my own default props on the column component
this element is not present when I override the columns component with a Custom component
how can I include the Column Layouts input type on my custom column?
one thing that I did was copy paste the columns code form @builder.io/react/Columns and still can’t see the Column layouts
Code stack i’m integrating Builder with:
NextJS, react, CommerceTools
- the custom component is Columns 2
Hello @gustavoFreire,
I wanted to inquire whether you are making any modifications to the default Builder React column component before registering it. Additionally, are there any errors appearing in the console that you could share for further insight?
The Idea is to create another builder component but with the same functionality as the built-in Columns component, but I can’t get the Column layouts input on a custom one, what I’m doing for now is creating a plugin to reverse engineer the Column layouts but I want to know if I can do something like this or at least if I have a simpler solution:
Builder.registerComponent(ColumnsComponent, {
name: 'Columns2',
inputs: [
{
name: 'Layout Desktop',
type: 'layout',
},
{
so this can be shown on the inputs
there are no errors on the console
also there is no modification on the current built in Columns component
Hello @gustavoFreire,
I think the issue is with the input type of ‘layout’ which is not supported at the custom component level
inputs: [
{
name: 'Layout Desktop',
type: 'layout',
},
1 Like
is there a way that I can achieve the same functionality besides creating a plugin?
Hello @gustavoFreire,
It seems that, as of now, modifying the default Builder React column component without building your own plugin is not supported. You may refer to the source code at this link for more details.
What did you end up doing @gustavoFreire ?
The code provided by @manish-sharma has no mention of the Column Layouts input. I’m also unable to find it in their repository. Providing an example of a plugin defining this input would be useful @manish-sharma
Created a plugin that has my own type called custom layouts
import React, { useEffect, useState } from "react";
import { Builder } from "@builder.io/react";
import { Box } from "@mui/material";
function CustomLayouts(props) {
const [selected, setSelected] = useState(2);
const boxLayoutCss = {
background: "#252525",
height: "57px",
width: "49%",
padding: "11px 11px",
borderRadius: "4px",
gap: "5px;",
display: "flex",
cursor: "pointer",
};
const selectedBox = {
...boxLayoutCss,
border: "1px solid #5d96ff",
};
const innerBoxLayoutCss = {
...boxLayoutCss,
height: "auto",
flexGrow: 1,
alignItems: "center",
justifyContent: "center",
color: "white",
background: "#9f9f9f",
};
const innerBoxSelectedCss = {
...innerBoxLayoutCss,
background: "#5d96ff",
};
return (
<Box
css={{
width: "100%",
display: "flex",
justifyContent: "space-between",
flexWrap: "wrap",
rowGap: "5px",
fontSize: "12px",
fontFamily: "Inter",
fontWeight: "bold",
}}
>
<Box
css={selected === 1 ? selectedBox : boxLayoutCss}
onClick={() => setSelected(1)}
>
<Box css={selected === 1 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/1
</Box>
</Box>
<Box
css={selected === 2 ? selectedBox : boxLayoutCss}
onClick={() => setSelected(2)}
>
<Box css={selected === 2 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/2
</Box>
<Box css={selected === 2 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/2
</Box>
</Box>
<Box
css={selected === 3 ? selectedBox : boxLayoutCss}
onClick={() => setSelected(3)}
>
<Box css={selected === 3 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/3
</Box>
<Box css={selected === 3 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/3
</Box>
<Box css={selected === 3 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/3
</Box>
</Box>
<Box
css={selected === 4 ? selectedBox : boxLayoutCss}
onClick={() => setSelected(4)}
>
<Box css={selected === 4 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/4
</Box>
<Box css={selected === 4 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/4
</Box>
<Box css={selected === 4 ? innerBoxSelectedCss : innerBoxLayoutCss}>
1/4
</Box>
</Box>
</Box>
);
}
Builder.registerEditor({
name: "CustomLayouts",
component: CustomLayouts,
});
2 Likes
I see, that’s very helpful thank you.
