react-repeat-component

    1.0.2 • Public • Published

    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:

    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}>{+ 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.🚶️

    Keywords

    none

    Install

    npm i react-repeat-component

    DownloadsWeekly Downloads

    536

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • nuragic