@brizy/core

Brizy Builder Core

Brizy Builder Core package allow to Register your own third party components into Brizy Builder.

Limitations

This package can only be used in the Brizy Builder context. It cannot be used in other applications.

Installation

Install my-project with npm

  npm install @brizy/core

Usage/Examples

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...
    }
  ]
});

Core Interface

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