Conditional Rendering

Use expressions to control rendering and styles based on prop values.

Conditional Expressions

{
  "children": [
    {
      "name": "LoadingSpinner",
      "elementType": "span",
      "conditional": { "$prop": "loading" }
    },
    {
      "name": "Icon",
      "elementType": "span",
      "conditional": {
        "$and": [
          { "$prop": "showIcon" },
          { "$not": { "$prop": "loading" } }
        ]
      }
    },
    {
      "name": "Badge",
      "elementType": "span",
      "conditional": {
        "$eq": [{ "$prop": "intent" }, "primary"]
      }
    }
  ]
}

Expression Types

Prop Reference

{ "$prop": "isVisible" }

Negation

{ "$not": { "$prop": "loading" } }

Logical AND

{
  "$and": [
    { "$prop": "showIcon" },
    { "$not": { "$prop": "loading" } }
  ]
}

Logical OR

{
  "$or": [
    { "$prop": "showIcon" },
    { "$prop": "showLabel" }
  ]
}

Equality

{ "$eq": [{ "$prop": "status" }, "success"] }

Inequality

{ "$ne": [{ "$prop": "status" }, "loading"] }

Conditional Behavior

Control what happens when condition is false:

{
  "conditional": { "$prop": "showDetails" },
  "conditionalBehavior": "hide"
}

Value	Description
`hide`	Remove from DOM (default)
`dim`	Reduce opacity to 50%
`outline`	Show dashed outline

Conditional Styles

Apply styles based on conditions:

{
  "conditionalStyles": [
    {
      "condition": { "$prop": "isActive" },
      "styles": { "backgroundColor": "#007bff", "color": "#ffffff" }
    },
    {
      "condition": { "$eq": [{ "$prop": "status" }, "error"] },
      "styles": { "borderColor": "#dc3545" }
    }
  ]
}

Evaluating Conditions

import { evaluateCondition } from '@reallygoodwork/coral-core'

// Simple prop check
evaluateCondition({ $prop: 'isVisible' }, { isVisible: true }) // true

// Negation
evaluateCondition({ $not: { $prop: 'loading' } }, { loading: false }) // true

// Complex expression
evaluateCondition(
  {
    $and: [
      { $prop: 'enabled' },
      { $not: { $prop: 'loading' } },
      { $or: [
        { $eq: [{ $prop: 'size' }, 'lg'] },
        { $eq: [{ $prop: 'size' }, 'xl'] }
      ]}
    ]
  },
  { enabled: true, loading: false, size: 'lg' }
) // true

Type Guard

import { isConditionalExpression } from '@reallygoodwork/coral-core'

if (isConditionalExpression(node.conditional)) {
  const shouldRender = evaluateCondition(node.conditional, props)
}

Guide: Conditionals - In-depth tutorial
Props & Events - Prop definitions
Variants - Variant-based styling

Conditional Rendering

On this page