React component that allows rendering of a component tree using a given data structure and components passed as props.
The components should follow a predetermined data structure. This is as follows:
type Component = {
id: string;
type: string;
value?: string;
children?: Component[];
attributes?: Attributes;
styles?: {
[key: string]: unknown;
};
};
type Attributes = {
[key: string]: unknown;
};Example:
{
"id": "1",
"type": "box",
"children": [
{
"id": "1.1",
"type": "box",
"children": [
{
"id": "1.1.1",
"type": "typography",
"value": "Empower content creators",
"attributes": {
"variant": "h1",
"className": "m-10 pink",
},
},
{
"id": "1.1.2",
"type": "typography",
"value": "greater power for content creation",
"attributes": {
"variant": "body1",
},
},
],
},
{
"id": "2",
"type": "Button",
"value": "Empower",
},
],
};Having the structure that defines how components can be used, you can pass a set of components on an object to Empower component.
import Empower, { Component } from "react-creator-empower";
import { Box, Button, Typography } from "your-components-folder";
const components = {
Box,
Button,
Typography,
};
export default function Home() {
return <Empower componentData={componentsData} components={components} />;
}