Что делает этот компонент (степпер с length и activeStep)?

Что такое компонент степпера?

Компонент степпера (Stepper) — это UI-элемент, который визуализирует последовательность шагов в процессе, например, в многошаговой форме или мастере настройки. Он помогает пользователю понимать, на каком этапе он находится и сколько шагов осталось.

Пропсы length и activeStep

Пропс length определяет общее количество шагов в процессе. Пропс activeStep указывает индекс текущего активного шага (начиная с 0). Компонент использует эти значения для отображения индикаторов шагов, выделения активного шага и, возможно, отметки завершенных шагов.

Пример реализации

function Stepper({ length, activeStep }) {
  const steps = Array.from({ length }, (_, i) => i);
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {steps.map((step) => (
        <div
          key={step}
          style={{
            width: '30px',
            height: '30px',
            borderRadius: '50%',
            backgroundColor: step === activeStep ? '#007bff' : '#ccc',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#fff',
          }}
        >
          {step + 1}
        </div>
      ))}
    </div>
  );
}

Применение

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

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