@n3/react-repeat

Repeating blocks component for react applications based on @n3/kit

Usage no npm install needed!

<script type="module">
  import n3ReactRepeat from 'https://cdn.skypack.dev/@n3/react-repeat';
</script>

README

@n3/react-repeat

Повторяющиеся блоки для приложений на базе @n3/kit.

import Repeat from '@n3/react-repeat';

<Repeat
  title="Группа полей"
>
  <Repeat.Block
    index={0}
  >
    Блок №1
  </Repeat.Block>

  <Repeat.Block
    index={1}
  >
    Блок №2
  </Repeat.Block>

  <Repeat.Block
    index={2}
  >
    Блок №3
  </Repeat.Block>
</Repeat>

Props

Repeat

Название Обязательность Тип Значение по умолчанию Описание
disabled boolean false Выключена ли кнопка добавления
title ReactNode null Заголовок
addButtonTitle ReactNode "Добавить ещё" Текст кнопки добавления
handleAdd () => void null Обработчик нажания на кнопку добавления, если не определён, кнопка добавления не отображается

Repeat.Block

Название Обязательность Тип Значение по умолчанию Описание
disabled boolean false Выключена ли кнопка удаления
title ReactNode null Заголовок
index + number Индекс в последовательности блоков
hasHorizontalPadding boolean true Есть ли отступ от левой и правой границ до контента
handleRemove (index: number) => void null Обработчик нажания на кнопку удаления, если не определён, кнопка удаления не отображается
@param index - индекс блока в массиве