Repeat

Repeat is a small utility for rendering repeated UI blocks. Internally it delegates to the list-focused For component, so it supports index access, empty state handling, and tag-based variants. Use it for skeleton loaders, star ratings, or grid placeholders where you need to render an element N times.

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

Basic usage#

Specify a repeat count and render a callback that receives the current index. This produces concise, intention-revealing code.

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

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

DOM-preserving variants#

Repeat offers variants like Repeat.div so you can preserve a container element while repeating its children—handy for consistent skeletons or grid layouts.

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