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.
npm install react-loop-z
# or
yarn add react-loop-z- 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
import { For } from "react-loop-z";
<For
of={["foo", "bar"]}
render={(item, index) => (
<span key={index}>Hello, {item}</span>
)}
/>
<For
of={[
{ shortName: "su1", name: "" },
{ shortName: "m", name: "" },
{ shortName: "t", name: "" },
{ shortName: "w", name: "" },
{ shortName: "t", name: "" },
{ shortName: "f", name: "" },
{ shortName: "sa2", name: "", dateClassName: "abcd" },
]}
keyName="shortName" // only required for <For />
/>import { Do } from "react-loop-z";
let param = 0;
<Do
condition={() => param < 2}
render={(index) => {
param++;
return <span key={index}>Hello, {index}</span>;
}}
/>import { While } from "react-loop-z";
let param = 0;
<While
condition={() => param++ < 2}
render={(index) => (
<span key={index}>Hello, {index}</span>
)}
/>import { MapLoop } from "react-loop-z";
const map = new Map([
["delpikye", "freelance"],
["hello", "world"],
]);
<MapLoop
of={map}
render={(value, key, index) => (
<span key={index}>
{key} - {value}
</span>
)}
/>import { SetLoop } from "react-loop-z";
const set = new Set(["foo", "bar"]);
<SetLoop
of={set}
render={(item, index) => (
<span key={index}>{item}</span>
)}
/>import { ObjectLoop } from "react-loop-z";
const obj = {
foo: "bar",
hello: "world",
};
<ObjectLoop
of={obj}
render={(value, key, index) => (
<span key={index}>
{key} - {value}
</span>
)}
/>
// If `render` is undefined, it will display the object’s value by defaultDoandWhilemay create infinite loops if the condition never becomes false.
Always ensure you update state/variables properly inside the loop.