степперизировать

Библиотека для создания пошаговых рабочих процессов в ваших приложениях.

• Быстро и эффективно

• Мощный и гибкий

• Легкий вес (< 1 КБ в сжатом виде)

• Полностью типобезопасный

• Сборная архитектура

• Нестилизованный для максимальной настройки

Установка

 npm установить @stepperize/реагировать

Быстрый старт

1. Импортируйте конструктор:

 импортировать {defineStepper} из "@stepperize/react";

2. Определите свои шаги:

 const { Scoped, useStepper, шаги } = defineStepper(
  { id: "шаг-1", title: "Шаг 1", описание: "Описание шага 1" },
  { id: "step-2", title: "Шаг 2", описание: "Описание шага 2" },
  { id: "step-3", title: "Шаг 3", описание: "Описание шага 3" },
  { id: "step-4", title: "Шаг 4", описание: "Описание шага 4" });

3. Используйте хук в своих компонентах:

 функция СтепперКомпонент() {
  const {currentStep, nextStep, prevStep} = useStepper();

  return (
 
{currentStep.title}
 
{currentStep.description
 Предыдущий  Далее
  );}

Как это работает

Stepperize позволяет вам определить серию шагов с уникальными идентификаторами. Когда вы создаете свои шаги с помощью defineStepper , вы получаете:

• Компонент Scoped для управления контекстом

• Хук useStepper для пошагового управления.

• Массив steps для рендеринга

Единственное обязательное поле для каждого шага — это id . Вы можете добавить любые дополнительные свойства, которые вам нужны, и они будут полностью типобезопасны при использовании хука.

Документация

Для получения более подробной информации об использовании, настройке и расширенных функциях посетите нашу полную документацию.

Содействие

Мы приветствуем вклады! Более подробную информацию можно найти в нашем Руководстве для участников.

Лицензия

Stepperize имеет лицензию MIT.