Custom components with free form

To make your component interactive and add options on the sidebar of the Visual Builder for entering data, you need to add the relevant options in the Widget file of that component and make necessary modifications in the Component as well. To add a text box on the side bar of the Visual Builder, you need to include the following code in the Widget file.

const configObj = {
  headingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
  ],
};

Up next, you will need to pass this object as an attribute in the widget file, as demonstrated in the following example.

const configObj = {
  headingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
  ]
}

const CustomComponentWidget = Widget.createWidget({
  component: CustomComponent,
  label:"<div class='gjs-fonts gjs-f-b1 custom-widget'>Custom Component</div>",
  category: 'Basic Components',
  content: '<CustomComponent/>',
  widgetName: 'CustomComponent',
  widgetProperties: {
    defaults: {
      name: 'Custom Component',
      attributes: {
        component_content: JSON.stringify(configObj);
      },
      activeOnRender: true,
    },
  },
});

In the above example, you can see that the configObj is added to the attributes. This inclusion ensures that the text box will be rendered on the sidebar of the Visual Builder. You can then access the value of the text box in your component as a prop. Here’s an example of how you can add multiple options by passing them in the traitConfig array.

const configObj = {
  headingText: '',
  subHeadingText: '',
  traitConfig: [
    {
      type: 'exp_text',
      internalName: 'headingText',
      displayName: 'Heading Text',
    },
    {
      type: 'exp_text',
      internalName: 'subHeadingText',
      displayName: 'Sub Heading Text',
    },
  ]
}

Next, let us guide you with how to add Custom Components Using Content Library.

Custom components with content library Custom components

Getting Started

Overview

Theme Components

Create Custom Widget

Theme Templates

Experro CLI

Other

Custom components with free form