Component Props Reference
The props every RUAL component understands: uid, uiclass, uistyle, uiattributes, children, plus per-component specifics.
Custom React components mounted in RUAL pages receive a standard set of props from the platform, plus the data you wire in yourself. This is the complete contract. Component setup itself: RUAL Components.
Universal Props (Every Component)
| Prop | Type | Purpose |
|---|---|---|
uid | string | Unique instance id. Required and must be stable per instance: used for state, keys, and identity. |
children | node | Nested content placed by the blueprint (nested state elements). |
uiclass | string | CSS classes applied to the component root. The styling hook from the blueprint. |
uistyle | string | Inline style string applied to the component root. |
uiattributes | string | Extra HTML attributes (e.g. data-*, aria-*) applied to the root. |
Per-Component Props
| Component | Props |
|---|---|
useTranslate | translation_key: key to look up in cluster translations |
useInput | field. The form field name it binds to |
| Iterate contexts (datatables) | uid, index, columns, row: per-row data for custom cells |
Styling Guide
- Default path: accept
uiclass/uistyle/uiattributesand spread them on your root element: blueprint authors then style instances from the canvas without touching your code. - Keep internals your own: root-level props are the public API; style everything inside with your component's own classes.
- Respect the platform shell: pages render inside the cluster's UI: inherit fonts and avoid global resets in component CSS.
Getting Data In
- Wire blueprint values into the component's pins (params appear as props). See Components.
- Fetch cluster data client-side through the RUAL library (
window.RUAL). See RUAL Library. - For lists (datatables), read
columns/rowin iterate contexts. See Handle Iterations.