Components:Core Concepts - bettyblocks/cli GitHub Wiki

JSX

Component markup is written in JSX syntax. This allows you combine HTML with JavaScript for interactivity.

A heading Component might look like this in JSX:

<div>
  <h1>Hello World</h1>
</div>

We can add logic between brackets ({}) to conditionally render the title:

<div>
  <h1>{1 === 1 ? 'Hello World' : 'Foo bar'}</h1>
</div>

For a more in-depth guide on how to use JSX, you can check out the React documentation.

Styles

Building Components without styling is boring; fortunately you can safely style your Components using the Component styles. If you're familiar with CSS you've probably encountered issues with scoping. To make sure styles don't interfere with each other, they are scoped to a Component. The following example will spice up the heading with some color:

{
  heading: {
    color: '#E9004C';
  }
}

The keys we define in our styles object will be translated to classes. These classes can be used inside the JSX:

<div>
  <h1 className={classes.heading}>Hello World</h1>
</div>

If you want to read more on how to use styles, see the JSS documentation.

Options

Sometimes you want parts of your Components to be configurable by the no-code developer. You can leverage the Betty Blocks platform by using Options. Options will be visible in the Page Builder sidebar on Component selection, and can be used to configure all sorts of things. When building a heading Component, it makes sense to make the text configurable:

{
  label: 'Heading text',
  key: 'text',
  value: 'Hello World',
  type: TEXT
}

The Option will be shown as a text input in the Page Builder sidebar, allowing the no-code developer to override the value. The output of the Option can be used in the JSX by accessing the options object:

<div>
  <h1>{options.text}</h1>
</div>

You can also use the value of your Options inside the styles. For example, to allow the no-code developer to select a heading color:

{
  label: 'Heading color',
  key: 'color',
  value: '#E9004C',
  type: 'COLOR'
}
{
  heading: {
    color: ({ options }) => options.color
  }
}
⚠️ **GitHub.com Fallback** ⚠️