Components

A Custom Component is a React functional component you register under Manage Components in RUAL Studio and place on a state page, available since RUAL Core 13.0.6. This page covers how existing components receive blueprint data and call blueprint functions.

For new interactive pieces on a web page, see when a custom script is needed.

Built-in components are blocks

RUAL provides an extensive list of components within the blueprinting environment. These default blocks are React-based functional components, integrated directly into blueprinting. For needs they do not cover, Custom Components give access to all custom React functional component capabilities.

Custom Components live under Manage Components

Since v13.0.6 of RUAL Core, the left-side menu has an option titled "Manage Components": an overview of the custom React components available across your entire cluster.

Build them as React Functional Components. They support everything you expect of a React component, with the minor changes for blueprinting described below.

react component custom build

Blueprint-specific parameters

For blocks that support storages or fields, access these through parameters. This promotes component reuse, but the parameters do not automatically appear in your code.

Certain inpin IDs are not directly usable within a React Component, and are remapped:

Trigger a blueprint function through an inpin

First define an inpin. This example uses an inpin named onclick of the type Executable Function with the identifier onclick.

const { runBlueprintFunction } = window.RUAL;

export default function CustomButtonComponent ({ uiclass, uistyle, uiattributes, onclick }) {
  function triggerFunction () {
    runBlueprintFunction(onclick, {
      'value': 'custom-value'
    });
  }

  return (
    <button
      { ...uiattributes }
      type="button"
      onClick={ triggerFunction }
      className={ ['form-control', uiclass] }
      style={ uistyle || {} }
    >Click me</button>
  );
}

Using React hooks

You can import any standard React hook for use in these components. This one uses React State:

const { useState } = window.React;

export default function CustomButtonComponent ({ uiclass, uistyle, uiattributes }) {
  const [isLoading, setIsLoading] = useState(false);

  function triggerFunction () {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  }

  return (
    <button
      { ...uiattributes }
      type="button"
      onClick={ triggerFunction }
      className={ ['form-control', uiclass] }
      style={ uistyle || {} }
    >
      {isLoading ? 'Loading...' : 'Click me'}
    </button>
  );
}

Object and array values for className

React Web does not accept object and array-based className properties, as React Native does. In RUAL these formats are supported, so you can combine multiple classes from inpins or other properties.

// uiclass = { 'bpclass': true }
export default function CustomClassNameComponent ({ uiclass }) {
  const classArrayExample = ['card-body'];
  return (
    <div
      className={ [{
        'card': true,
        'other': false
      }, 'form-control', uiclass, classArrayExample] }
    >Class will be <code>card form-control bpclass card-body</code></div>
  );
}