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/uiattributes and 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/row in iterate contexts. See Handle Iterations.

Next Steps

RUAL Components The component system these props belong to. RUAL Library Fetching cluster data from components. Handle Iterations Row-level rendering in datatables.

Frequently asked

Which props does every RUAL component receive?

uid, children, uiclass, uistyle and uiattributes. The uid is the unique instance id used for state, keys and identity, and the other three are the styling hooks the blueprint applies to your component's root element.

How does a custom RUAL component get data from the blueprint?

Three ways: wire blueprint values into the component's pins so they appear as props, fetch cluster data client-side through the RUAL library at window.RUAL, or read the columns and row props in iterate contexts such as datatables.

How should I style the inside of a RUAL custom component?

Accept uiclass, uistyle and uiattributes on the root element and keep everything inside on your component's own classes. Pages render inside the cluster's UI shell, so inherit fonts and avoid global resets in your component CSS.