RUAL Components

A Custom Component can embed the components that ship with RUAL, such as input.jsx, button.jsx and translate_key.jsx. Give each one a unique uid and pass the parameters listed below.

The default components are React functional components

By default, RUAL offers an extensive selection of components within blueprinting. These standard blocks are React-based functional components, integrated into blueprinting. This page shows how to use them inside your custom components, and lists the common ones with their names.

Every reactive component needs a unique uid

Most reactive components need their own unique identifier, so they can listen for changes in the global state or handle other RUAL events.

• Extract the uid from the params by prefixing them with uid, .
• Make each injected component's uid unique by prefixing it with an identifier of your own, in combination with the existing uid.

Using translations

The translation component requests translations and can incorporate HTML content into them. The translate function is available for use within JavaScript and React as well.

import { Translate } from './translate_key.jsx';

export default function CustomExampleTranslate (props) {
  return (
    <div>
      <Translate bp_translate_key="key_to_translate" />
    </div>
  );
}

Using inputs

The input components are integrated with the global state through the state get and set key blocks in blueprinting. Constructing your own input is feasible, but often unnecessary.

import { TextInput } from './input.jsx';

export default function CustomExampleInput ({ uid, onenter }) {
  return (
    <div>
      <TextInput uid={'input_' + uid} bp_field="form.name" onenter={onenter} />
    </div>
  );
}

Commonly used components

Nearly all of these accept the default parameters uiclass, uistyle and uiattributes. A children parameter means the component supports React children: nest other components within its tags. The full props contract is in the Component Props Reference.

Styling: apply the root props to your root element

Accept the uiclass, uistyle and uiattributes props and apply them to your component's root element. That lets blueprint authors style instances from the canvas without touching your code. Keep everything inside the root on your own classes. Per-component props and data-fetching patterns are in the Component Props Reference and RUAL Library.