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: about 1 month 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 (6 months ago)
- Last Synced: 2026-02-10T07:40:22.755Z (about 2 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
# ✨ react-loop-z
[](https://www.npmjs.com/package/react-loop-z) 
---
**react-loop-z** is a lightweight, type-safe, declarative looping
toolkit for React.
It helps you replace `.map()` chains and manual iteration logic with
**clean, expressive JSX blocks**.
> Write loops like logic. Render JSX like structure.
---
## 📖 Why react-loop-z?
- Declarative JSX loops
- Strict TypeScript support
- Zero dependencies
- Tree-shakable
- Infinite loop protection (safe guards)
- SSR & StrictMode safe
- Tiny bundle size
---
## 🧠 Mental Model
- Pure function components
- No internal state machines
- No proxies or runtime magic
- Strict generic typing
- Guard-based loop safety
> Each loop is an independent, tree-shakable unit.
> Import only what you use.
---
## 📦 Installation
``` bash
npm install react-loop-z
```
---
## 🚀 Usage
#### 🔁 For (Array iteration)
``` tsx
import { For } from "react-loop-z";
{(item, index) => (
Hello, {item}
)}
```
Type-safe example:
``` tsx
type User = { id: number; name: string };
of={users}>
{(user) =>
{user.name}}
```
---
#### 🔢 Range / Numeric Loop
``` tsx
import { RangeLoop } from "react-loop-z";
{(i) =>
{i}}
```
---
#### 🔂 While
``` tsx
import { While } from "react-loop-z";
let i = 0;
i++ < 3}
>
{(index) =>
Count {index}}
```
---
#### 🔄 Do
``` tsx
import { Do } from "react-loop-z";
let i = 0;
i < 3}
>
{(index) => {
i++;
return
Count {index};
}}
```
---
#### 🗺️ MapLoop
``` tsx
import { MapLoop } from "react-loop-z";
{(value, key) => (
{key}: {value}
)}
```
---
#### 🧩 SetLoop
``` tsx
import { SetLoop } from "react-loop-z";
{(item) =>
{item}}
```
---
#### 🗂️ ObjectLoop
``` tsx
import { ObjectLoop } from "react-loop-z";
{(value, key) => (
{key}: {value}
)}
```
---
## 🛡 Infinite Loop Protection
`While`, `Do`, and numeric loops include safety guards to prevent
runaway infinite loops in development.
Always ensure your condition eventually becomes false.
---
#### 🔥 BreakableLoop
Declarative loop with early exit support (like `break` in JavaScript).
``` tsx
{(user, { breakLoop }) => {
if (!user.active) breakLoop()
return
}}
```
---
#### 🔎 FilterLoop
Render conditionally without chaining `.filter().map()`.
``` tsx
p.inStock}>
{(product) => }
```
---
#### 🧱 ChunkLoop
Split an array into chunks (ideal for grid or row rendering).
``` tsx
{(chunk) => (
{chunk.map(post => )}
)}
```
---
#### ✂️ TakeLoop
Render only the first N elements (lightweight alternative to `slice`).
``` tsx
{(msg) => }
```
---
#### 🧬 UniqueLoop
Remove duplicates by key selector before rendering.
``` tsx
u.email}>
{(user) => }
```
---
#### 📦 FlatLoop
Flatten nested arrays before rendering.
``` tsx
{(comment) => }
```
---
#### ⏳ AsyncLoop
Supports async iterables, promises, or async generators with built-in
async handling.
``` tsx
{(user) => }
```
Or:
``` tsx
{(value) =>
{value}}
```
---
## ⚡ Core Numeric Loops
#### RangeLoop
Declarative numeric range loop.
``` tsx
{(i) =>
{i}}
```
---
#### TimesLoop
Render N times (simple repeat utility).
``` tsx
{(index) => }
```
---
## 📊 Comparison
| Feature | react-loop-z | react-loops | react-for | Native `.map()` |
|-----------------------------|--------------|-------------|-----------|-----------------|
| Declarative JSX Blocks | ✅ | ✅ | ✅ | ❌ |
| Strong TypeScript Inference | ✅ | ⚠️ Partial | ⚠️ | ⚠️ Manual |
| Array Loop | ✅ | ✅ | ✅ | ✅ |
| Numeric / Range Loop | ✅ | ❌ | ⚠️ | ❌ |
| While / Do Loop | ✅ | ⚠️ | ⚠️ | ❌ |
| Map / Set / Object Support | ✅ | ✅ Iterable | ⚠️ | ⚠️ Manual |
| Break Control | ✅ | ❌ | ❌ | ❌ |
| Async Loop | ✅ | ❌ | ❌ | ❌ |
| Infinite Loop Protection | ✅ | ❌ | ❌ | ❌ |
| Zero Runtime Dependencies | ✅ | ❌ | ⚠️ | ✅ |
| Tree-Shakable | ✅ | ❌ | ❌ | ✅ |
> A declarative loop control system for React — not just array mapping.
---
## 🎯 Philosophy
- Keep rendering pure
- Keep iteration declarative
- Keep bundle tiny
- Keep logic readable
> Iteration belongs to structure, not utility chains.
---
## 🏁 Final Thought
react-loop-z is not trying to replace `.map()`.
It provides:
- Structure-driven iteration
- Declarative control flow
- Composable loop primitives
Think of it as: **Control flow components for React.**
---
## 📄 License
MIT