Brizy Builder Core package allow to Register your own third party components into Brizy Builder.
This package can only be used in the Brizy Builder context. It cannot be used in other applications.
Install my-project with npm
npm install @brizy/core
Import Brizy
core, and then you can register your own component
import { Brizy } from "@brizy/core";
import { ToolbarProps } from "../types/toolbars";
import { getItems as getSidebarItems } from "./sidebar";
import "./style.scss";
import { getItems as getToolbarItems } from "./toolbar";
export function MySuperComponent(props: Props): JSX.Element {
return (
<div className="componentToolbar">
{/*... your component code...*/}
</div>
);
}
Brizy.registerComponent(MySuperComponent, {
id: "MySupercomponentId",
//... other props
options: (props: ToolbarProps) => [
{
selector: ".componentToolbar", // open toolbar when you click on element with this selector
toolbar: getToolbarItems(props), // toolbar description...
sidebar: getSidebarItems(props) // sidebar desription...
}
]
});
Class Brizy{
static registerComponent<T>(
component:ComponentType, // this is React Component Type
componentConfig: ComponentData<T>
){}
}
export interface ComponentData<T> {
id: string;
title: string;
category?: string;
keywords?: Array<string>;
mode?: EditorMode;
preview?: Preview;
icon?: string;
options?: (props: ValueGetter) => ToolbarConfig[];
}
... Other types you can find in dist/types