SeparatedIterator

An extension of Iterator that iterates over the array given via the items prop, renders each item, and renders a separator between each element simultaneously.

By default, the separator after the last element is excluded. However, setting includeLastSeparator to true will include it.

Additionally, separatorInterval can be used to render a separator at a specific interval.

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;

Props

Name	Type	Default	Description
items	T[] | readonly T[] | undefined	-	Array to iterate and render
renderItem	(item: T, index: number) => JSX.Element	-	Function to render each item
separator	JSX.Element	-	Separator component rendered between each item
itemKey	keyof T | string	-	Property name to use as the unique key for each element
separatorInterval	number	1	Interval at which to render the separator
includeLastSeparator	boolean	false	Whether to include a separator after the last item

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