React logic components

Provide the React control statements components <If>, <Switch>, <For>

Installation

npm:

npm i reloc

yarn:

yarn add reloc

API

1. Simple condition

<If>

| Property | Type | Required | |----------------------|---------------------------|----------| | check | Boolean | yes | | then or children | ReactNode, Function, null | no |

Example 01:

import { If } from  'reloc';

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

or syntax:

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

or unsafe syntax (Not recommend, see react issue 35):

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

2. Complex conditional, Switch statements

<Switch>

Only the first case that satisfies the condition will be rendered.

| Property | Type | Required | Default | Description | |--------------|-------------------------|----------|---------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | match | Boolean, Number, String | no | | If the match has set value, the component works as a 'Switch mode.' Otherwise, it works as a complex conditional mode. | | strict | Boolean | no | true | Only available for 'Switch mode.' If strict is true, it will check the data type of the match when comparing with the case value. See the example below for a better understanding. |

<Case>

| Property | Type | Required | |----------------------|---------------------------|----------| | check | Boolean | yes | | then or children | ReactNode, Function, null | no |

<Default>

| Property | Type | Required | |----------------------|---------------------------|----------| | - | | | | then or children | ReactNode, Function, null | no |

Example 02 - Complex condition:

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

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

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

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

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

<Switch>
  <Case check={status === DOING}>
    <span>DOING</span>
  </Case>
  <Case check={status === DONE}>
    <span>DONE</span>
  </Case>
  <Default>
    <span>OTHER</span>
  </Default>
</Switch>

Example 03: Switch mode:

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

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

Deferred syntax, alternative syntax similar to example 02.

Example 04: Switch mode with the strict prop off:

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

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

Deferred syntax, alternative syntax similar to example 02.

3. Loop

<For>

Support Array, Set, Map, Object data types.

| Property | Type | Required | Description | |------------|----------------------------------------------------------------------------|----------|-----------------------------------------------------------------------------------------------| | items | Array, Map, Set, Object | yes | | | children | Function: (item: any, key: String|Number, index: Number) => ReactNode | yes | If the data type of the items is an Array or Set, the 'key' value will reference the index. |

Example 05:

import {For} from  'reloc';

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

or unsafe syntax:

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

Important: Deferring evaluation of children

It's crucial to understand that in JavaScript, which is an eagerly evaluated language, the code inside both the <If>, <Case>, <Default>, and <For> components will be executed even if the condition turns out to be false.

More specifically, the following code will throw an error obj is not defined:

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

To fix this issue, the code should be written like this:

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

or alternative syntax:

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

Therefore, for safety and efficiency reasons, it's recommended to use arrow functions for the child components of <If>, <Case>, <Default>, <For>.

For more discussion on If in React by the react team, have a look at https://github.com/reactjs/react-future/issues/35.

Alternative Solutions

As mentioned above, this package doesn't always run with the cleanest and most readable syntax. You'll need to use arrow functions for cases where children have complex logic to ensure safety.

So, is there any solution for a more comprehensive implementation of control statements in JSX? The answer is YES. You can refer to the following packages:

• jsx-control-statements
• tsx-control-statements

These are packages I really like but have to be cautious about due to the following limitations:

• Compatibility: They only support a specific transpiler (babel, tsx). As of the current date (2024-01-06), jsx-control-statements doesn't work with popular bundlers like Vite, esbuild, microbundle, etc.
• Long-term support: Solutions using React components to implement control statements will remain compatible with newer React versions as long as React ensures backward compatibility. Projects based on transpiler plugins may need updates when a new transpiler version is released.
• IDE lacks code highlighting support.