diff --git a/.changeset/fuzzy-berries-taste.md b/.changeset/fuzzy-berries-taste.md
new file mode 100644
index 0000000..00a1808
--- /dev/null
+++ b/.changeset/fuzzy-berries-taste.md
@@ -0,0 +1,12 @@
+---
+'classic-react-components': minor
+---
+
+## Features
+
+### Repeat component
+```tsx
+
+ this is content
+
+```
diff --git a/README.md b/README.md
index 9f21a54..9452e84 100644
--- a/README.md
+++ b/README.md
@@ -62,8 +62,10 @@ $ yarn add classic-react-components
- [Then](#then)
- [Else](#else)
- [For](#for)
+- [Repeat](#repeat)
- [Switch](#switch)
+
## If
| Prop | Type | Required | Default Value | Description |
@@ -286,6 +288,59 @@ export default function YourComponent() {
```
+## Repeat
+
+| Prop | Type | Required | Default Value | Description |
+| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |
+| times | number | ❌ | 0 | Times to repeat the children |
+| children | JSX.Element \| (()=> JSX.Element) | ❌ | undefined | children needed to repeat |
+
+### Working
+
+- Used for rendering template or loaders in repeated manner without writing `new Array(length).map()` code.
+- Just pass `times` and `children` props, and children will be renderd `n times` automatically.
+
+
+
+### Examples
+
+#### 1. Passing children as default JSX
+```tsx
+import { Repeat } from 'classic-react-components'
+
+export default function YourComponent() {
+
+ return (
+
+
+ this is going to repeated
+
+
+ )
+}
+```
+
+#### 2. Passing children as function which renders jsx (used to dynamically injecting things in jsx).
+```tsx
+import { Repeat } from 'classic-react-components'
+
+export default function YourComponent() {
+ const someState = "this is text"
+ return (
+
+
+ {(idx) => {
+ return (
+ this is content-{idx}- {someState}
+ )
+ }}
+
+
+ )
+}
+```
+
+
## Switch
| Prop | Type | Required | Default Value | Description |
diff --git a/src/index.tsx b/src/index.tsx
index cf1b85b..c7ce9ff 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,3 +4,4 @@ export { default as Else } from './lib/components/Else/Else'
export { default as Then } from './lib/components/Then/Then'
export { default as For } from './lib/components/For/For'
export { default as Switch } from './lib/components/Switch/Switch'
+export { default as Repeat } from './lib/components/Repeat/Repeat'
diff --git a/src/lib/components/Repeat/Repeat.test.tsx b/src/lib/components/Repeat/Repeat.test.tsx
new file mode 100644
index 0000000..9f22277
--- /dev/null
+++ b/src/lib/components/Repeat/Repeat.test.tsx
@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react'
+import Repeat from './Repeat'
+
+describe('Repeat.tsx', () => {
+ it('should render without any errors or crash', () => {
+ render(
+
+ this is going to repeated
+
+ )
+ })
+
+ it('should render nothing without any errors if prop is not provided', () => {
+ render(
+
+ this is content
+
+ )
+ expect(screen.queryByTestId('children')).not.toBeInTheDocument()
+ })
+
+ it('should render children repeated n times', () => {
+ render(
+
+ this is content
+
+ )
+ expect(screen.queryAllByTestId('children').length).toBe(3)
+ })
+
+ it('should render children of function type repeated n times', () => {
+ render({(idx) => this is content-{idx}
})
+ expect(screen.queryAllByTestId(/^children-(.*)$/).length).toBe(3)
+ expect(screen.queryByTestId('children-0')).toBeInTheDocument()
+ expect(screen.queryByTestId('children-1')).toBeInTheDocument()
+ expect(screen.queryByTestId('children-2')).toBeInTheDocument()
+ })
+})
diff --git a/src/lib/components/Repeat/Repeat.tsx b/src/lib/components/Repeat/Repeat.tsx
new file mode 100644
index 0000000..b3c9841
--- /dev/null
+++ b/src/lib/components/Repeat/Repeat.tsx
@@ -0,0 +1,25 @@
+import { Fragment } from 'react'
+
+export default function Repeat({
+ times = 0,
+ children,
+}: {
+ times?: number
+ children?: JSX.Element | ((idx: number) => JSX.Element)
+}): JSX.Element {
+ if (times == 0) {
+ return <>>
+ }
+
+ const childArr = new Array(times)
+
+ for (let i = 0; i < times; i++) {
+ if (typeof children == 'function') {
+ childArr.push({children(i)})
+ } else {
+ childArr.push(children)
+ }
+ }
+
+ return <>{childArr}>
+}