Components:Components - bettyblocks/cli GitHub Wiki

A Component is a function returning a JavaScript object telling Betty Blocks how to render a part of your Page. A Component is always part of a Prefab.

interface ComponentStructure {
  allowedTypes: string[];
  jsx: JSX.Element;
  name: string;
  orientation: Orientation;
  styles: B => Styles;
  type: string;
}

This example configures a heading Component:

(function Component() {
  return {
    name: 'Heading',
    type: 'HEADING',
    allowedTypes: [],
    orientation: 'HORIZONTAL',
    jsx: (
      <div>
        <h1 className={classes.heading}>{options.text}</h1>
      </div>
    ),
    styles: B => ({
      heading: {
        color: '#E9004C',
      },
    }),
  };
})();

The following keys are required:

Name of the Component, used as a reference inside the structure of a Prefab. This name is also used to reference the Component in a Component Configuration.

The name has type string.

This sets the type of a Component. The type can be used in the allowedTypes of other Components to determine whether this type can be nested.

The type is a string.

A list of types which the Component allows as children. See also the type key.

AllowedTypes has type string[].

States whether the drop indicator in the Page Builder will be shown vertically or horizontally when the Component is dragged or moved on the canvas.

Orientation is of the following type:

type Orientation = "HORIZONTAL" | "VERTICAL";

The template of the Component. See Introducing JSX and JSX in depth to learn more about this templating language. Inside the JSX you can make use of Component Helpers.

Jsx has type JSX.Element.

The styles scoped to the Component. See CSS in JS to learn more about the framework.

Styles has type B => Styles.