react-4

A React component to create loops.

Install

npm i react-4

Usage

importForfrom"react-4"// or import { For } from "react-4"

Repeat

<ul><Foreach="3"><li>item</li></For></ul>

Output:

<ul><li>item</li><li>item</li><li>item</li></ul>

Repeat (with iteration status)

<ul><Foreach="3"map={stat=>(<likey={stat.index}><pre>{JSON.stringify(stat,null,2)}</pre></li>)}/></ul>

Output:

<ul><li><pre>{
"index": 0,
"count": 1,
"size": 3,
"isEven": true,
"isOdd": false,
"isFirst": true,
"isLast": false
}</pre></li><li><pre>{
"index": 1,
"count": 2,
"size": 3,
"isEven": false,
"isOdd": true,
"isFirst": false,
"isLast": false
}</pre></li><li><pre>{
"index": 2,
"count": 3,
"size": 3,
"isEven": true,
"isOdd": false,
"isFirst": false,
"isLast": true
}</pre></li></ul>

Range

<ul><Foreach="3..5"map={item=>(<likey={item}>item {item}</li>)}/></ul>

Output:

<ul><li>item 3</li><li>item 4</li><li>item 5</li></ul>

Range (with iteration status)

<ul><Foreach="2..-1"map={(item,stat)=>(<likey={stat.index}>item {item}</li>)}/></ul>

Output:

<ul><li>item 2</li><li>item 1</li><li>item 0</li><li>item -1</li></ul>

Range (with object prop)

<ul><Foreach={{from: 3,to: 5}}map={(item,stat)=>(<likey={stat.index}>item {item}</li>)}/></ul>

Output:

<ul><li>item 3</li><li>item 4</li><li>item 5</li></ul>

Array

<ul><Foreach={[1,2,3]}map={(item,stat)=>(<likey={stat.index}className={stat.isEven ? 'even-item' : 'odd-item'}>{stat.isFirst
? 'first item'
: stat.isLast
? 'last item'
: `item ${item}`}</li>)}/></ul>

Output:

<ul><liclass="even-item">first item</li><liclass="odd-item">item 2</li><liclass="even-item">last item</li></ul>

License

MIT © mskoroglu