Did you know that you can use prebuilt controls in your app?

Smart Builder contains plenty of built-in controls that you can take advantage of.

➡️ To recap on existing controls in Smart Builder has, see Smart Builder Controls

For example, you can use controls for setting up the alignment, color, and typography in Smart Builder.

A diagram demonstrating how Apps receive the controls from Smart Builder.

A diagram demonstrating how Apps receive the controls from Smart Builder.

For example, let’s start with the HelloWorld app as a base.

<aside> 💡 Remember, you have all the Smart Builder controls available to you. If at any point you need to export one, or one is missing, you can add it manually from the config/smart-builder-components file.

</aside>

Requirements

To start, you will need to create an app using the official Smart Builder CLI and understand controls, styles, and schema in apps.

Quick Start

Once you create the app, you’ll notice that you have some implemented controls in the hello-world.tsx file:

import React from 'react';
import { WithControls, ControlButton, WithStyles } from 'smart-builder-sdk';

const textAlignLabel = 'My own text align';

export default WithStyles(
  WithControls(HelloWorld, [
    'text-align', // Built-in control
    {
			// Custom control
      id: 'custom-text-align',
      label: textAlignLabel,
      Button: (props) => (
        <ControlButton label={textAlignLabel} active={false} {...props}>
          An Icon
        </ControlButton>
      ),
      Panel: (props) => <ReversePanel {...props}/>,
      type: 'subtoolbar',
    },
  ]),
  'styles',
  'paragraph',
);

Interested in learning more about the WithStyles method? See Styles & High-Order Components.

Using a Custom Control