RUAL Components
Building custom components in RUAL Studio offers an excellent opportunity to maximize the potential of React and RUAL together. However, there may be instances where you wish to integrate existing components within RUAL alongside your own creations.
Our Default Components
By default, we offer an extensive selection of components within blueprinting. These standard blocks are React-based functional components, tailored to provide the RUAL developer with a wide array of functionalities seamlessly integrated into blueprinting.
On this page, we will discuss and demonstrate how you can incorporate these existing components within your custom components. Additionally, we will present a list of commonly used components along with their names.
UID in components
Most, reactive, components need their own unique identifier. This way, they can listen for changes in the global state or handle other RUAL based events. When injecting RUAL Components into your Custom Components, you'll need to extract the uid from the params. You can easily do this by prefixen the params with uid, . You'll need to make sure that each uid for each RUAL Component is unique, you can do this by prefixen them with an unique identifier in combination with the existing uid.
Using Translations
A frequently requested feature, which we also employ in our own blocks, is the translation component. This component enables you to request translations and incorporate HTML content into them. Additionally, we provide access to the translate function for integration within JavaScript/React.
Using Inputs
Our input components are seamlessly integrated with the global state through the use of state get/set key blocks in blueprinting. While constructing your own inputs is certainly feasible, it's often unnecessary. Below is an example showcasing how to utilize our pre-existing input component.
List of Commonly Used Components
Below is a compilation of RUAL Components that are commonly utilized within Custom React Components. Nearly all of these components accommodate the default parameters: uiclass, uistyle, and uiattributes. Regarding the children parameter, it indicates that the component supports React Children logic, which means other components should be nested within the tags of this component.
| filename | params |
|---|---|
input.jsx |
uid, bp_field, type, onenter |
input_file.jsx |
uid, bp_action_guid, bp_field, type, onenter |
input_price.jsx |
uid, bp_field, disabled |
input_date.jsx |
uid, bp_field |
input_checkbox.jsx |
uid, bp_field, value |
button.jsx |
value, icon, iconclass, iconstyle, type, inpinfunction |
button_content.jsx |
children, icon, iconclass, iconstyle, type, inpinfunction |
translate_key.jsx |
bp_translate_key, language |