https://github.com/mskoroglu/react-4

A React component to create loops.
https://github.com/mskoroglu/react-4

Last synced: 12 months ago
JSON representation

A React component to create loops.

• Host: GitHub
• URL: https://github.com/mskoroglu/react-4
• Owner: mskoroglu
• Created: 2019-10-30T06:45:49.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T11:33:32.000Z (over 3 years ago)
• Last Synced: 2025-06-06T10:05:59.774Z (about 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 1.41 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-4

A React component to create loops.

[![NPM](https://img.shields.io/npm/v/react-4.svg)](https://www.npmjs.com/package/react-4) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm i react-4

```

## Usage

```jsx

import For from "react-4"

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

```

### Repeat

```jsx



  

    
item

  



```

Output:

```html



  
item

  
item

  
item



```


### Repeat (with iteration status)

```jsx



   (

    


      
{JSON.stringify(stat, null, 2)}

    

  )} />



```

Output:

```html



  


    
{

    "index": 0,

    "count": 1,

    "size": 3,

    "isEven": true,

    "isOdd": false,

    "isFirst": true,

    "isLast": false

    }

  

  


    
{

    "index": 1,

    "count": 2,

    "size": 3,

    "isEven": false,

    "isOdd": true,

    "isFirst": false,

    "isLast": false

    }

  

  


    
{

    "index": 2,

    "count": 3,

    "size": 3,

    "isEven": true,

    "isOdd": false,

    "isFirst": false,

    "isLast": true

    }

  



```


### Range

```jsx



   (

    
item {item}

  )} />



```

Output:

```html



  
item 3

  
item 4

  
item 5



```


### Range (with iteration status)

```jsx



   (

    
item {item}

  )} />



```

Output:

```html



  
item 2

  
item 1

  
item 0

  
item -1



```


### Range (with `object` prop)

```jsx



   (

    
item {item}

  )} />



```

Output:

```html



  
item 3

  
item 4

  
item 5



```


### Array

```jsx



   (

    


      {stat.isFirst

        ? 'first item'

        : stat.isLast

          ? 'last item'

          : `item ${item}`

      }

    

  )} />



```

Output:

```html



  
first item

  
item 2

  
last item



```


## License

MIT © [mskoroglu](https://github.com/mskoroglu)