Repeat

Repeat renders a block a fixed number of times. It is useful for skeletons, star ratings, and placeholders.

function Repeat(props: {
  times: number;
  children: (index: number) => React.ReactNode;
  fallback?: React.ReactNode;
}): React.ReactNode;

Basic usage#

Provide a positive integer times and render a callback that receives the current index. If times is not a positive integer, fallback is rendered.

import { Repeat } from '@ilokesto/utilinent';

function StarRating({ rating }) {
  return (
    <Repeat times={rating}>
      {(index) => <span key={index}>⭐️</span>}
    </Repeat>
  );
}

DOM-preserving variants#

Repeat.div and similar variants keep a wrapper element while repeating children.

<Repeat.div times={3} className="skeleton">
  {(index) => <div key={index} className="skeleton-item" />}
</Repeat.div>