react-repeat-component
Render any component/element N
times, in ascending or descending order. The wrapper can be any component/element as well.
Heavily inspired by the Official React Docs section JSX In Depth - Functions as Children. 😁
Rationale
Let's say you just want to repeat 10
times an element, a custom component, whatever, but you don't have an Array
to map()
and render those elements. So, you end up doing something like:
; Component { let steps = ; for let i=0; i < 10; i++ steps; return <div className="progress-bar">steps</div> ; }
Not bad... Just a bit ugly isn't it? But then, you eventually end up repeating that pattern again and again, copy-pasting the same chunk of code. No worries, this dumb stateless component is here to help!
Examples
This is how to achieve the same result using the <Repeat>
component.
;; Component { return <Repeat times=10 className="progress-bar"> <Step key=i id=`step-`></Step> </Repeat> ; }
To change the order and/or the wrapper element, just use like this:
<Repeat = ="desc" ="p" ="repeater"> i <span =>i + 1</span></Repeat>
And finally, take in mind that you can pass any other additional property you need for the wrapper
(I used className
just to illustrate that).
The API in a nutshell
RepeatpropTypes = times : PropTypesnumberisRequired order : PropTypesisRequired wrapper : PropTypesstringisRequired; RepeatdefaultProps = order : 'asc' wrapper : 'div';
Installation
npm i -S react-repeat-component
yarn add react-repeat-component
Contributing
Please, feel free to open any issue / pull request. 🙏
License
MIT.🚶️