Custom Components

For developers who want total creative freedom, MyFolioHub offers the ability to build Custom Components. Using React and Tailwind CSS, you can create unique blocks that fit perfectly into the MyFolioHub Builder, allowing you to extend the platform's capabilities to meet your specific needs.

The Component Architecture

A custom component in MyFolioHub consists of two parts:

• The React Component: The actual code that renders your block on the page.
• The Configuration Schema: A JSON object that defines the properties (props) that can be edited within the MyFolioHub Builder.

Building Your First Component

We provide a specialized SDK to help you build and test your components locally. Here's a basic example of a custom "Callout" component:

// MyCallout.tsx
import React from 'react';

export const MyCallout = ({ title, content, type }) => {
  const bgColor = type === 'warning' ? 'bg-amber-50' : 'bg-blue-50';
  return (
    <div className={`p-6 rounded-2xl ${bgColor}`}>
      <h4 className="font-bold">{title}</h4>
      <p>{content}</p>
    </div>
  );
};

Registering with the Builder

To make your component editable, you need to define its schema. This tells the MyFolioHub Builder what controls to show in the Property Inspector:

// schema.json
{
  "name": "MyCallout",
  "label": "Custom Callout",
  "props": [
    { "name": "title", "type": "text", "label": "Title" },
    { "name": "content", "type": "textarea", "label": "Content" },
    { "name": "type", "type": "select", "label": "Type", "options": ["info", "warning"] }
  ]
}

Deployment and Hosting

Once your component is ready, you can deploy it to our Component Registry. We'll host your code on our global CDN and make it available in your Portfolio Builder instantly. You can even share your components with the MyFolioHub community through our public marketplace.