Skip to main content

​
If Component

The <If> component provides declarative conditional rendering. It’s a cleaner alternative to {condition && (<Component />)} patterns.

​
Basic Usage

import { If, Phase, Step, Claude } from "smithers-orchestrator";

<If condition={phase === "implement"}>
  <Phase name="Implementation">
    <Step name="implement">
      <Claude>Implement the feature.</Claude>
    </Step>
  </Phase>
</If>

​
Props

​
condition
boolean
required
Condition to evaluate. Children render only when true.
<If condition={status === "ready"}>
  <Claude>Start the task.</Claude>
</If>
​
children
ReactNode
required
Content to render when condition is true.

​
Multi-Phase Workflow

import { If, SmithersProvider, Phase, Step, Claude, useSmithers } from "smithers-orchestrator";
import { useQueryValue } from "smithers-orchestrator/reactive-sqlite";

function Workflow({ db, executionId }) {
  const phase = useQueryValue<string>(
    db.db,
    "SELECT value FROM state WHERE key = 'phase'"
  ) ?? "research";
  
  const setPhase = (p: string) => db.state.set('phase', p);

  return (
    <SmithersProvider db={db} executionId={executionId} maxIterations={10}>
      <If condition={phase === "research"}>
        <Phase name="Research">
          <Step name="research">
            <Claude onFinished={() => setPhase("implement")}>
              Research the codebase.
            </Claude>
          </Step>
        </Phase>
      </If>

      <If condition={phase === "implement"}>
        <Phase name="Implementation">
          <Step name="implement">
            <Claude onFinished={() => setPhase("test")}>
              Implement the feature.
            </Claude>
          </Step>
        </Phase>
      </If>

      <If condition={phase === "test"}>
        <Phase name="Testing">
          <Step name="test">
            <Claude onFinished={() => setPhase("done")}>
              Run tests.
            </Claude>
          </Step>
        </Phase>
      </If>
    </SmithersProvider>
  );
}

​
Benefits

  1. Cleaner JSX - No curly braces or parentheses clutter
  2. Better Readability - Intent is explicit
  3. Consistent Style - Matches JSX component patterns
  4. No Empty Renders - Returns null when condition is false (same as &&)

​
Complex Conditions

<If condition={phase === "test" && testsEnabled}>
  <Phase name="Testing">
    <Step name="test">
      <Claude>Run tests.</Claude>
    </Step>
  </Phase>
</If>

Phase

Phase workflow structure

Ralph

Loop control