Regstering web components for use in Builder's Visual Editor

General
10

Hey @rinkal, this web components pattern is for when you are using our Web Components API, usually when you don’t have a more modern framework available in your app.

I see your app is Built in React and possibly NextJs, and the good news is that the use of , builderWcLoadCallbacks, etc are all not necessary within the React SDK and we have a number of features build into the SDK to streamline and simplify your implementation.

I would recommend checking out our React Custom Components documentation for more info, but more likely your file could be cleaned up to look something like this:

import React from 'react';
import { Builder } from '@builder.io/react';
import Head from 'next/head';


Builder.registerComponent(MyHero, {
   name: 'My Hero',
   inputs: [ 
       { name: 'title', type: 'string', defaultValue: 'Hello world' },
       { name: 'subTitle', type: 'string', defaultValue: 'Lorem ipsum' }
     ]
   });

class MyHero extends React.Component { 
 render() {
   return (
       <h1>{this.props.title}</h1>
       <h2>{this.props.subTitle}</h2>
   )
}

export default function TestPage() {
   return(
     <>
       <Head>
         <title>Test</title>
       </Head>
       <MyHero title="Hello world" subTitle="Lorem ipsum"></MyHero>
     </>
   )
 }

Would this work for you? We also have a number of React and NextJs starters, such as our Next Js Simple starter or our React Design System starter that each of examples of registering custom components

Let me know if this answers your questions!