React For
A React component library to create loops in JSX.
Installation
$ npm install --save react-forUsage
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.