Reloc – React Logic Components

Reloc provides logic control components for React JSX, including:

• <If> – simple conditional rendering
• <Switch>, <Case>, <Default> – complex conditional logic
• <For> – iteration over collections

Installation

npm

npm i reloc

yarn

yarn add reloc

API

1. Simple Conditional – <If>

Props

| Name | Type | Required | Description | | -------------------- | --------------------------- | -------- | --------------------- | | is | Boolean | ✔ | Condition to evaluate | | then or children | ReactNode | Function | null | ✖ | Content to render |

Examples

Recommended usage (with function):

import { If } from 'reloc';

<If is={obj} then={() => (
  <span>It is done</span>
)} />

Alternative syntax:

<If is={status === DONE}>
  {() => (
    <span>It is done</span>
  )}
</If>

⚠️ Unsafe syntax (not recommended):

<If is={status === DONE}>
  <span>It is done</span>
</If>

2. Complex Conditionals – Switch / Case

<Switch>

Only the first matching case will be rendered.

| Prop | Type | Required | Default | Description | | -------- |-------------------------| -------- | ------- | --------------------------------------------------- | | match | Boolean, Number, String | ✖ | true | Value to compare against cases | | strict | Boolean | ✖ | true | When enabled, comparison checks both value and type |

<Case>

| Prop | Type | Required | | -------------------- | --------------------------- | -------- | | is | Boolean | ✔ | | then or children | ReactNode | Function | null | ✖ |

<Default>

| Prop | Type | Required | | -------------------- | --------------------------- | -------- | | then or children | ReactNode | Function | null | ✖ |

Example 1: Conditional logic

import { Switch, Case, Default } from 'reloc';

<Switch>
  <Case is={status === DOING} then={() => (
      <span>DOING</span>
  )} />
  <Case is={status === DONE} then={() => (
      <span>DONE</span>
  )} />
  <Default then={() => (
      <span>OTHER</span>
  )} />
</Switch>

Alternative syntax:

<Switch>
  <Case is={status === DOING}>
    {() => (
        <span>DOING</span>
    )}
  </Case>
  <Case is={status === DONE}>
    {() => (
        <span>DONE</span>
    )}
  </Case>
  <Default>
    {() => (
        <span>OTHER</span>
    )}
  </Default>
</Switch>

Example 2: Switch mode

<Switch match={status}>
  <Case is={DOING} then={() => (
      <span>DOING</span>
  )} />
  <Case is={DONE} then={() => (
      <span>DONE</span>
  )} />
  <Default then={() => (
      <span>OTHER</span>
  )} />
</Switch>

Example 3: Switch mode with strict={false}

<Switch match={1} strict={false}>
  <Case is={'1'} then={() => (
      <span>Passed</span>
  )} />
  <Case is={'2'} then={() => (
      <span>Not passed</span>
  )} />
  <Default then={() => (
      <span>Not passed</span>
  )} />
</Switch>

⚠️ Unsafe syntax (not recommended):

<Switch match={status}>
    <Case is={'doing'}>
        <span>Passed</span>
    </Case>
    <Case is={'done'}>
        <span>Not Passed</span>
    </Case>
    <Default>
        <span>Not passed</span>
    </Default>
</Switch>

3. Loop – <For>

Supported data types:

• Array
• Set
• Map
• Object

Props

| Name | Type | Required | Description | | ---------- |-----------------------------------| -------- | --------------------- | | items | Array, Set, Map, Object | ✔ | Collection to iterate | | children | (item, key, index) => ReactNode | ✔ | Render function |

For Array and Set, key is the same as index.

Example

import { For } from 'reloc';

<For items={items}>
  {(item, key, index) => (
    <span key={key}>
      {index}: {item.name}
    </span>
  )}
</For>

Important: Deferring Evaluation of Children

JavaScript uses eager evaluation, meaning JSX expressions are executed even when conditions are false.

Incorrect ❌

<If is={obj}>
  <span>{obj.attr}</span>
</If>

This will throw an error if obj is undefined.

Correct ✅

<If is={obj} then={() => (
    <span>{obj.attr}</span>
)} />

Or:

<If is={obj}>
    {() => (
        <span>{obj.attr}</span>
    )}
</If>

👉 Recommendation: Always use arrow functions for children in:

• <If>
• <Case>
• <Default>
• <For>

For more discussion, see the React team issue: https://github.com/reactjs/react-future/issues/35

Alternative Solutions

Reloc prioritizes long-term compatibility with React, though the syntax may feel verbose in some cases.

If you prefer JSX syntax closer to native control statements, consider:

• babel-plugin-jsx-control-statements
• tsx-control-statements

Limitations of these approaches:

• ❌ Depend on specific transpilers (babel, tsx)
• ❌ Limited compatibility with modern bundlers (Vite, esbuild, microbundle)
• ❌ Poor IDE syntax highlighting
• ❌ Potential maintenance issues when upgrading transpilers

👉 A React-component-based approach like Reloc is generally safer and more future-proof.