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 repeat10 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:import React from 'react';
class ProgressBar extends React.Component {
render() {
let steps = [];
for (let i=0; i < 10; i++) {
steps.push(<Step key={i} id={`step-${i}`}></Step>);
}
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.import React from 'react';
import Repeat from 'react-repeat-component';
class ProgressBar extends React.Component {
render() {
return(
<Repeat times={10} className="progress-bar">
{(i) => <Step key={i} id={`step-${i}`}></Step>}
</Repeat>
);
}
}To change the order and/or the wrapper element, just use like this:
<Repeat times={10} order="desc" wrapper="p" className="repeater">
{(i) => <span key={i}>{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
Repeat.propTypes = {
times : PropTypes.number.isRequired,
order : PropTypes.oneOf(['asc', 'desc']).isRequired,
wrapper : PropTypes.string.isRequired
};
Repeat.defaultProps = {
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.🚶️