Component Basics

Importing a component

Components require an import in your source file before use. If other files use the same Component, those files also need to import the component before use.

At the top of your file, import a component like so:

import { Printer } from '@electricui/components-desktop'

Components are in different packages depending on the UI framework and platform, refer to their individual documentation for their specific package.

When importing more than one component from the same package, bundle them into the same import:

import { Printer } from '@electricui/components-desktop'
 
import {
  Button,
  Checkbox,
  ProgressBar,
  Slider,
} from '@electricui/components-desktop-blueprint'

If you have a namespace conflict with two components sharing the same name (if you have some other Button component for example), you can alias the binding during import:

import { Button as ElectricButton } from '@electricui/components-desktop-blueprint'

Usage

To use the component you've imported, use the generalised <Component ... /> syntax, and use accessors to provide the component with the variable(s) we want to work with.

All tags must close, either within the starting tag with a / at the end, or a full closing tag </Component> if the component accepts children.

<Printer accessor="temperature" />

<Slider>
  <Slider.Handle accessor="temp_min"/>
  <Slider.Handle accessor="temp_max"/>
</Slider>

Properties

Most components support configurable properties to alter the behaviour or appearance.

For example, the Printer component has a precision property which lets us control how many decimal places print. This is useful when working with floating point values and keeping the output reasonable!

<Printer accessor="temperature" precision={2} />

For a full list of properties, look on the components page for the UI component of interest.

Accessors

Most components have an accessor prop that allows it to automatically grab state from the hardware. These accessors are either a string denoting the messageID, or an inline function to grab it from the UI's state tree.

A simple accessor that grabs the temp_min messageID.

<Printer accessor="temp_min" />

A functional accessor that grabs the 0th element from the temps messageID. Functional accessors are often used to grab sub-members of an object payload or a certain index of an array payload.

<Printer accessor={state => state.sensors.temperature} />

<Printer accessor={state => state.temps[0]} />

Read the accessors and writers doc for more details.