Custom components - Experro

Experro’s Base Theme gives you the freedom to design and integrate your unique custom components seamlessly into the Visual Builder. Unlock endless possibilities and bring your vision to life effortlessly.

Tip!

Consider looking at the Component Best Practices for some tips!

To create a custom component, follow these steps to create a basic React component in the src/components/cms-library folder: Step 1:

import React from 'react';

const CustomComponent = () => {
  return (
    <div>
      {/* Add your component's content here */}
    </div>
  );
}

export default CustomComponent;

Step 2: Once you have created your custom component, import your custom component in the src/components/cms-library/index.ts file and export your component from the same file, as demonstrated in the example below.

// Import your CustomComponent
import CustomComponent from 'path/CustomComponent';

// ...other code

export {
  // ...other exports
  CustomComponent,
};

Step 3: After creating your custom component, the next step is to create a widget for it, to make it availabe in Visuals Builder component list. To gain a comprehensive understanding of widgets, please refer to the Widget documentation.