Nine Pomeranian Monsters

    react-repeat
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.2 • Public • Published

    react-repeat

    React component for repeat components or elements effortless.

    NPM JavaScript Style Guide

    This component will you help to repeat components or elements to fill the length that you need.

    See usage and examples.

    Install

    npm install --save react-repeat

    Usage

    You can pass the elements that you wanna repeat inside of the component <Repeat /> this recibes a size prop with the length that you need, example:

    import Repeat from 'react-repeat'
    
    const App = () => {
      return (
        <div>
          <Repeat size={6}>
            <li>🍌</li>
            <li>🍓</li>
          </Repeat>
        </div>
      )
    }
    
    // Output
    <div>
      <li>🍌</li>
      <li>🍓</li>
      <li>🍌</li>
      <li>🍓</li>
      <li>🍌</li>
      <li>🍓</li>
    </div>

    If you pass an odd number on size prop, the items will be repeated until to fill the length that you need it.

    import Repeat from 'react-repeat'
    
    const App = () => {
      return (
        <div>
          <Repeat size={5}>
            <li>🍌</li>
            <li>🍓</li>
            <li>🍏</li>
          </Repeat>
        </div>
      )
    }
    
    // Output
    <div>
      <li>🍌</li>
      <li>🍓</li>
      <li>🍏</li>
      <li>🍌</li>
      <li>🍓</li>
    </div>

    You can pass shuffle prop and the output elements will be randomized.

    import Repeat from 'react-repeat'
    
    const App = () => {
      return (
        <div>
          <Repeat size={5} shuffle>
            <li>🍉</li>
            <li>🍌</li>
          </Repeat>
        </div>
      )
    }
    
    // Output
    <div>
      <li>🍉</li>
      <li>🍉</li>
      <li>🍌</li>
      <li>🍌</li>
      <li>🍉</li>
    </div>

    You can pass any item not only HTML elements, example with React Components:

    import Repeat from 'react-repeat'
    
    function BannanaButton (props) {
      return <button>🍌 Banana Button</button>
    }
    
    function Counter (props) {
      const [count, setCount] = React.useState(0)
    
      function increment () {
        setCount(count + 1)
      }
    
      return (
        <button onClick={increment}>
          Count {count}
        </button>
      )
    }
    
    const App = () => {
      return (
        <div>
          <Repeat size={10}>
            <BannanaButton />
            <Counter />
          </Repeat>
        </div>
      )
    }
    
    // Output
    <div>
      <BannanaButton />
      <Counter />
      <BannanaButton />
      <Counter />
      <BannanaButton />
      <Counter />
      <BannanaButton />
      <Counter />
      <BannanaButton />
      <Counter />
    </div>

    The props will be passed automatically on every clone component:

    import Repeat from 'react-repeat'
    
    function Button ({ message, onSayHello }) {
      return (
        <button onClick={() => onSayHello(message)}>
          Hello
        </button>
      )
    }
    
    
    const App = () => {
    
      function handle (message) {
        console.log(message)
      }
    
      return (
        <div>
          <Repeat size={10}>
            <Button
              onSayHello={handle}
              message='This is cool!'  
            />
          </Repeat>
        </div>
      )
    }
    
    // Output
    <div>
      <Button
        onSayHello={handle}
        message='This is cool!'  
      />
      <Button
        onSayHello={handle}
        message='This is cool!'  
      />
      <Button
        onSayHello={handle}
        message='This is cool!'  
      />
      <Button
        onSayHello={handle}
        message='This is cool!'  
      />
      <Button
        onSayHello={handle}
        message='This is cool!'  
      />
    </div>

    Props

    Prop Name Type Default Description
    size Number 0 List length expected.
    shuffle Boolean false Randomize the elements

    This component uses Standard JS

    JavaScript Style Guide

    License

    MIT © rocksfenix

    Keywords

    none

    Install

    npm i react-repeat

    DownloadsWeekly Downloads

    1

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    79.3 kB

    Total Files

    46

    Last publish

    Collaborators

    • gerardogallegos