SeparatedIterator

Iterator를 확장해 items props로 주어진 배열을 반복하면서 각 항목에 대해 특정 요소 및 컴포넌트를 렌더링하며, 동시에 각 요소 사이에 구분자(Separator)를 렌더링 하는 컴포넌트입니다.

기본적으로 마지막 요소의 Separator는 제외됩니다. 하지만, includeLastSeparator를 true로 설정하면 포함시킬 수 있습니다.

또한, separatorInterval를 활용해 특정 간격 만큼 Separator를 렌더링 할 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

interface SeparatedIteratorProps<T> extends IteratorProps<T> {
  separator: JSX.Element;
  separatorInterval?: number; // default: 1
  includeLastSeparator?: boolean; // default: false
}

const SeparatedIterator: <T>({
  itemKey,
  items,
  separator,
  renderItem,
  separatorInterval,
  includeLastSeparator,
}: SeparatedIteratorProps<T>) => JSX.Element;

Usage

typescript

import { SeparatedIterator } from '@modern-kit/react';

interface Item {
  id: number;
  name: string;
}

const Example = () => {
  const items: Item[] = [
    { id: 1, name: 'Gromit' },
    { id: 2, name: 'Dylan' },
    { id: 3, name: 'Minjae' },
  ];

  return (
    <SeparatedIterator
      items={items}
      renderItem={(item) => (
        <h3>
          id: {item.id}, name: {item.name}
        </h3>
      )}
      separator={<div style={{ height: '3px', backgroundColor: 'gray' }} />}
    />
  );
};

Example

id: 1, name: Gromit

id: 2, name: Dylan

id: 3, name: Minjae