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.