feat(utils): add renderTimes util

Author: JeongHwan-dev

src/index.ts

@@ -28,3 +28,4 @@ export { useVisibilityEvent } from './hooks/useVisibilityEvent/index.ts';
 export { buildContext } from './utils/buildContext/index.ts';
 export { mergeProps } from './utils/mergeProps/index.ts';
 export { mergeRefs } from './utils/mergeRefs/index.ts';
+export { renderTimes } from './utils/renderTimes/index.ts';

src/utils/renderTimes/index.ts

@@ -0,0 +1 @@
+export { renderTimes } from './renderTimes.ts';

src/utils/renderTimes/renderTimes.spec.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest';
+
+import { renderTimes } from './renderTimes.ts';
+
+describe('renderTimes', () => {
+  it('should render components the specified number of times', () => {
+    const result = renderTimes(3, index => `Item ${index}`);
+
+    expect(result).toHaveLength(3);
+    expect(result).toEqual(['Item 0', 'Item 1', 'Item 2']);
+  });
+
+  it('should return empty array when count is 0', () => {
+    const result = renderTimes(0, index => `Item ${index}`);
+
+    expect(result).toHaveLength(0);
+    expect(result).toEqual([]);
+  });
+
+  it('should handle negative count by returning empty array', () => {
+    const result = renderTimes(-1, index => `Item ${index}`);
+
+    expect(result).toHaveLength(0);
+    expect(result).toEqual([]);
+  });
+
+  it('should call renderFunction with correct index for each iteration', () => {
+    const indices: number[] = [];
+    renderTimes(4, index => {
+      indices.push(index);
+      return index;
+    });
+
+    expect(indices).toEqual([0, 1, 2, 3]);
+  });
+
+  it('should work with React components', () => {
+    const result = renderTimes(2, index => ({
+      type: 'div',
+      key: index.toString(),
+      props: { children: `Component ${index}` },
+    }));
+
+    expect(result).toHaveLength(2);
+    expect(result[0]).toEqual({
+      type: 'div',
+      key: '0',
+      props: {
+        children: 'Component 0',
+      },
+    });
+    expect(result[1]).toEqual({
+      type: 'div',
+      key: '1',
+      props: {
+        children: 'Component 1',
+      },
+    });
+  });
+
+  it('should work with different return types', () => {
+    const numberResult = renderTimes(3, index => index * 2);
+
+    expect(numberResult).toEqual([0, 2, 4]);
+
+    const booleanResult = renderTimes(2, index => index % 2 === 0);
+
+    expect(booleanResult).toEqual([true, false]);
+
+    const nullResult = renderTimes(2, () => null);
+
+    expect(nullResult).toEqual([null, null]);
+  });
+});

src/utils/renderTimes/renderTimes.ts

@@ -0,0 +1,60 @@
+import type { ReactNode } from 'react';
+
+/**
+ * @description
+ * `renderTimes` is a utility function that renders components a specified number of times.
+ * It's useful for creating repeated UI elements like lists, grids, skeleton loaders, or pagination items
+ * without manual duplication or verbose Array.from constructs.
+ *
+ * @param {number} count - The number of times to render the component. Returns empty array if count is 0 or negative.
+ * @param {(index: number) => ReactNode} renderFunction - Function that receives the current index (0-based) and returns a ReactNode to render.
+ *
+ * @returns {ReactNode[]} An array of ReactNode elements.
+ *
+ * @example
+ * // Basic list rendering
+ * function ItemList() {
+ *   return (
+ *     <div>
+ *       {renderTimes(5, (index) => (
+ *         <div key={index}>Item {index + 1}</div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Skeleton loading state
+ * function ProductSkeleton() {
+ *   return (
+ *     <div className="product-grid">
+ *       {renderTimes(8, (index) => (
+ *         <div key={index} className="product-card-skeleton">
+ *           <div className="skeleton-image" />
+ *           <div className="skeleton-title" />
+ *           <div className="skeleton-price" />
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Pagination dots
+ * function PaginationDots({ totalSlides, currentSlide }) {
+ *   return (
+ *     <div className="pagination-dots">
+ *       {renderTimes(totalSlides, (index) => (
+ *         <button
+ *           key={index}
+ *           className={`dot ${index === currentSlide ? 'active' : ''}`}
+ *           onClick={() => goToSlide(index)}
+ *         />
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ */
+export function renderTimes(count: number, renderFunction: (index: number) => ReactNode): ReactNode[] {
+  return Array.from({ length: count }, (_, index) => renderFunction(index));
+}