rcx()

Compose class names reactively — returns a getter function for use with reactive class props.

Since alpha.8

For reactive class composition directly on an element prop, prefer the array form on class: — it accepts strings, falsy shorthands, and reactive getters in one place, with no separate cx / rcx decision. See /api/elements/#class-array-form-since-alpha8. Reach for rcx() when you need to compose a reactive class string outside an element prop.

Signature

function rcx(...args: (string | (() => string | false | null | undefined) | false | null | undefined)[]): () => string

Any positional argument can be a plain string, a falsy value (false / null / undefined), or a getter function returning string-or-falsy. Falsy values and falsy getter returns are skipped; remaining classes are space-joined.

Examples

One static class

div({ class: rcx("btn") })

Static base + reactive toggle

const loading = signal(false);

div({
  class: rcx("btn", () => loading.value && "btn-loading"),
})

All reactive

const theme = signal<"light" | "dark">("light");
const size = signal<"sm" | "md" | "lg">("md");

div({
  class: rcx(
    () => `theme-${theme.value}`,
    () => `size-${size.value}`,
  ),
})

Mixing with sheet() classes

const s = sheet({
  item:   { padding: "0.5rem" },
  active: { background: "var(--color-accent-low)" },
});

const selected = signal(false);

li({
  class: rcx(s.item, () => selected.value && s.active),
})

Multiple toggles

const variant = signal<"primary" | "secondary">("primary");
const loading = signal(false);

div({
  class: rcx(
    "btn",
    () => variant.value === "primary" && "btn-primary",
    () => variant.value === "secondary" && "btn-secondary",
    () => loading.value && "btn-loading",
  ),
})