React For

A React component library to create loops in JSX.

Installation

$ npm install --save react-for

Usage

All components require that you pass in a function to be called each loop.

For Loop

The For component emulates a javascript for loop.

const arr = [];
for (let i = INITIAL_VALUE; TEST_EXPR; NEXT_OP) {
  const component = CODE_TO_CREATE_COMPONENT;
  arr.push(component);
}

Is equivalent to

import { For } from 'react-for';
<For start={INITIAL_VALUE} comparator={i => TEST_EXPR} next={i => NEXT_OP}>{
  (i) => {
    CODE_TO_CREATE_COMPONENT;
    return component;
  }
}</For>

For Of

The ForOf component emulates a for..of loop.

const data = [ 1, 2, 3 ];
const arr = [];
for (const value of data) {
  const component = CODE_TO_CREATE_COMPONENT;
  arr.push(component);
}

Is equivalent to

import { ForOf } from 'react-for';
const data = [ 1, 2, 3 ];
<ForOf data={data}>{
  (i) => {
    CODE_TO_CREATE_COMPONENT;
    return component;
  }
}</ForOf>

For In

The ForIn component emulates a for..in loop.

const data = [ 1, 2, 3 ];
const arr = [];
for (const value in data) {
  const component = CODE_TO_CREATE_COMPONENT;
  arr.push(component);
}

Is equivalent to

import { ForOf } from 'react-for';
const data = [ 1, 2, 3 ];
<ForIn data={data}>{
  (i) => {
    CODE_TO_CREATE_COMPONENT;
    return component;
  }
}</ForIn>

While

The While component emulates a while loop.

const arr = [];
while (TEST_EXPR) {
  const component = CODE_TO_CREATE_COMPONENT;
  arr.push(component);
}

Is equivalent to

import { While } from 'react-for';
const data = [ 1, 2, 3 ];
<While test={TEST_EXPR}>{
  (i) => {
    CODE_TO_CREATE_COMPONENT;
    return component;
  }
}</While>

Do While

The DoWhile component emulates a do-while loop.

const arr = [];
do {
  const component = CODE_TO_CREATE_COMPONENT;
  arr.push(component);
} while (TEST_EXPR)

Is equivalent to

import { DoWhile } from 'react-for';
const data = [ 1, 2, 3 ];
<DoWhile test={TEST_EXPR}>{
  (i) => {
    CODE_TO_CREATE_COMPONENT;
    return component;
  }
}</DoWhile>

Keying

In React, a key prop should be attached to all components being rendered from a list. The key should be a string that is unique among all components in the list.

// The following generates an ascii code table
<table>
  <tr>
    <th>Ascii Code</th>
    <th>Character</th>
  </tr>
  <For start={0} test={i => i < 256} next={i => i + 1}>{
    (i) => (
      <tr key={i}>
        <td>{i}</td>
        <td>{String.fromCharCode(i)}</td>
      </tr>
    )
  }</For>
</table>

Prop Aliasing

Currently the following prop aliases are supported. Create an issue to suggest others. The first prop of each row is the recommended alias and is used in all code examples.

Prop Type	Aliases
Data	data, from
Next	next
Render	children, render
Start	start, begin
Test	test, comparator, compare

Docs

Click to see full docs here.