Component props — Voidhash Docs

The settings a component exposes in the paywall designer, declared in component.json and in Rust.

Props are the settings the paywall designer shows for each instance of a component. Declare them in the component definition and as parameters of the #[component] function.

Fields

Each prop in component.json has a name, a type and a default. The designer reads the other fields to show it well:

Field	Meaning
`title`	The prop's label. Defaults to its name.
`description`	A sentence about what it does.
`group`	A heading the prop is shown under. Props without one come first.
`visibleWhen`	Shows the prop only while another prop has a value: `{ "kind": "equals", "prop": "style", "value": "ring" }`, or `oneOf` with `values`.
`bindable`	Whether the prop can take a variable instead of a value. On for scalar props, those of every type but `object` and `list`, unless set `false`.
`localizable`	Whether the prop has a value per locale, for translated paywalls. Props of any kind can.

Types

The type sets what the prop holds and the control the designer shows for it:

Type	Value
`string`	Text. `multiline` shows a larger field; `maxLength` limits its length.
`number`	A number. `min`, `max` and `step` shape the field; `unit` is `px`, `%`, `s`, `deg` or `x`.
`boolean`	On or off.
`enum`	One of its `options`: `[{ "value": "ring", "title": "Ring" }]`. An option can add an `icon`.
`color`	A hex color, such as `#7c3aed`.
`fill`	A color or fill the component paints with.
`asset`	An image from the project's assets: `{ "kind": "asset", "accepts": ["image"] }`.
`product`	One of the project's products.
`object`	A group of `fields`, each a prop of its own.
`list`	A list of another type: `{ "kind": "list", "of": { "kind": "product" } }`. `maxItems` caps it.

Every parameter after cx in a #[component] function is a prop. Its name is the parameter's name in camelCase, and its type follows the Rust type: String, numbers, bool, Color, Fill, Image or Asset, Product or ProductId, an enum deriving PropEnum, and Option or Vec of those. #[prop(…)] sets the rest:

pub fn Countdown(
    cx: Cx,
    #[prop(default = 900, min = 0, max = 3600, step = 1, unit = "s", group = "Timing")]
    duration: f64,
    #[prop(title = "Headline", localizable, max_length = 40)] title: String,
    #[prop(accepts(image))] badge: Asset,
    #[prop(visible_when(prop = "style", equals = "ring"))] thickness: f64,
    #[prop(max_items = 4)] features: Vec<String>,
    style: Style,
) -> View

An enum deriving PropEnum becomes an enum prop with one option per variant. Name each option with #[prop_enum(title = "…")] when its variant name does not read well.

Publishing checks that the props in component.json match these.

Next steps