Build Multi-Step Forms in React Without the Headache – Introducing SmartStepper

#react #typescript #javascript #frontend

Build Multi-Step Forms in React Without the Headache – Introducing SmartStepper

Forms are essential to most apps – onboarding, checkouts, surveys, you name it. But when it comes to multi-step forms, things can quickly become messy:

Step navigation logic scattered across components
Validation rules mixed with UI code
Tedious state management
Hard to reuse or scale

That's exactly why I built SmartStepper — a config-based React utility for building smart, clean, multi-step forms.

🧠 Why SmartStepper?

SmartStepper takes a different approach. Instead of imperative navigation and state juggling, you define your form flow declaratively in one place:

Steps and how they connect (next, previous)
Validation rules per step
Optional view logic

All inside a single config object.

🧩 Example

Here’s a simple 3-step form config:

const config: SmartStepperConfig<'user' | 'address' | 'confirm'> = {
  start: 'user',
  orchesration: {
    user: { 
      next: (data) => data.fullName ? 'address' : 'user' 
    },
    address: {
      next: () => 'confirm',
      previous: (data) => data.fullName ? 'user' : 'address',
    },
    confirm: { previous: () => 'address' },
  },
  validations: {
    user: {
      schema: yup.object({
        fullName: yup.string().required('Full Name is required'),
        email: yup.string().email().required('Email is required'),
      }),
      defaultValues: { fullName: '', email: '' },
    },
    address: {
      schema: yup.object({
        city: yup.string().required(),
        zip: yup.string().required(),
      }),
      defaultValues: { city: '', zip: '' },
    },
    confirm: {
      schema: yup.object(),
      defaultValues: {},
    },
  },
  views: {
    user: { component: <UserInfoStep /> },
    address: { component: <AddressStep /> },
    confirm: { component: <ConfirmStep /> },
  },
  onSubmit: (data: FieldValues) => {
    console.log('Final submission', data);
    alert('Form submitted successfully!');
  },
};