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} +}