npm install react-repeat
You can pass the elements that you wanna repeat inside of the component, pass the number of repetitions with prop size:
<Repeat size={6}>
<li>🍌</li>
</Repeat>
You can pass diferent elements:
<Repeat size={6}>
<li>🍌</li>
<li>🍓</li>
</Repeat>
If you pass an odd number on ``size`` prop, the items will be repeated until to fill the length that you need it.
<Repeat size={5}>
<li>🍌</li>
<li>🍓</li>
<li>🍏</li>
</Repeat>
You can pass ``shuffle`` prop and the output elements will be randomized, only will calculated on first render.
<Repeat size={5} shuffle>
<li>🍉</li>
<li>🍌</li>
</Repeat>
You can pass any item not only HTML elements, example with React Components:
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>
)
}
render (
<div>
<Repeat size={10}>
<BannanaButton />
<Counter />
</Repeat>
</div>
)
The props will be passed automatically on every clone component:
function Button ({ message, onSayHello }) {
return (
<button onClick={() => onSayHello(message)}>
Hello
</button>
)
}
const App = () => {
function handle (message) {
alert(message)
}
return (
<div>
<Repeat size={6}>
<Button
onSayHello={handle}
message='This is cool!'
/>
</Repeat>
</div>
)
}
render(
<App />
)