https://github.com/delpikye-v/react-loop
React wrapper loop. Simple and easy to use
https://github.com/delpikye-v/react-loop
loops react-for-each react-loop
Last synced: 4 months ago
JSON representation
React wrapper loop. Simple and easy to use
- Host: GitHub
- URL: https://github.com/delpikye-v/react-loop
- Owner: delpikye-v
- License: mit
- Created: 2024-10-19T19:56:07.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-18T17:02:06.000Z (5 months ago)
- Last Synced: 2025-09-18T19:52:12.940Z (5 months ago)
- Topics: loops, react-for-each, react-loop
- Homepage: https://www.npmjs.com/package/react-loop-z
- Size: 20.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-loop-z)
[](https://standardjs.com)
---
## 📖 Description
`react-loop-z` is a **React wrapper for looping** data structures.
It provides simple, clean, and declarative components for rendering arrays, objects, maps, sets, and conditional loops.
---
## 📦 Installation
```bash
npm install react-loop-z
# or
yarn add react-loop-z
```
---
## 🚀 Usage
### Available Components
- **For** – iterate over arrays
- **Do** – do...while loop (⚠️ careful with infinite loops)
- **While** – while loop (⚠️ careful with infinite loops)
- **MapLoop** – iterate over `Map`
- **SetLoop** – iterate over `Set`
- **ObjectLoop** – iterate over object keys/values
---
### 🔁 For
```tsx
import { For } from "react-loop-z";
(
Hello, {item}
)}
/>
/>
```
---
### 🔂 Do
```tsx
import { Do } from "react-loop-z";
let param = 0;
param < 2}
render={(index) => {
param++;
return Hello, {index};
}}
/>
```
---
### 🔄 While
```tsx
import { While } from "react-loop-z";
let param = 0;
param++ < 2}
render={(index) => (
Hello, {index}
)}
/>
```
---
### 🗺️ MapLoop
```tsx
import { MapLoop } from "react-loop-z";
const map = new Map([
["delpikye", "freelance"],
["hello", "world"],
]);
(
{key} - {value}
)}
/>
```
---
### 🧩 SetLoop
```tsx
import { SetLoop } from "react-loop-z";
const set = new Set(["foo", "bar"]);
(
{item}
)}
/>
```
---
### 🗂️ ObjectLoop
```tsx
import { ObjectLoop } from "react-loop-z";
const obj = {
foo: "bar",
hello: "world",
};
(
{key} - {value}
)}
/>
// If `render` is undefined, it will display the object’s value by default
```
---
## ⚠️ Notes
- `Do` and `While` may create **infinite loops** if the condition never becomes false.
Always ensure you update state/variables properly inside the loop.
---
## 📄 License
[MIT](https://mit-license.org/) © [DelpiK](https://github.com/delpik)