Typed Multi-Step Wizard Form With a useReducer State Machine in React

import { useReducer, useCallback, useMemo } from "react";
import {
  wizardReducer,
  initialState,
  TOTAL_STEPS,
  WizardData,
} from "./wizardReducer";

export function useWizard() {
  const [state, dispatch] = useReducer(wizardReducer, initialState);

  const patch = useCallback(
    (data: Partial<WizardData>) => dispatch({ type: "NEXT", patch: data }),
    []
  );

  const back = useCallback(() => dispatch({ type: "BACK" }), []);
  const goto = useCallback(
    (step: number) => dispatch({ type: "GOTO", step }),
    []
  );
  const reset = useCallback(() => dispatch({ type: "RESET" }), []);

  const flags = useMemo(
    () => ({
      isFirst: state.step === 0,
      isLast: state.step === TOTAL_STEPS - 1,
      progress: Math.round((state.step / (TOTAL_STEPS - 1)) * 100),
    }),
    [state.step]
  );

  return { state, patch, back, goto, reset, ...flags };
}

import { useState } from "react";
import { WizardData } from "./wizardReducer";

type AccountSlice = Pick<WizardData, "email" | "password">;

interface Props {
  data: Partial<AccountSlice>;
  onNext: (patch: AccountSlice) => void;
}

export function AccountStep({ data, onNext }: Props) {
  const [email, setEmail] = useState(data.email ?? "");
  const [password, setPassword] = useState(data.password ?? "");
  const [error, setError] = useState<string | null>(null);

  function submit(e: React.FormEvent) {
    e.preventDefault();
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) {
      return setError("Enter a valid email address.");
    }
    if (password.length < 8) {
      return setError("Password must be at least 8 characters.");
    }
    setError(null);
    onNext({ email, password });
  }

  return (
    <form onSubmit={submit} noValidate>
      <label>
        Email
        <input value={email} onChange={(e) => setEmail(e.target.value)} />
      </label>
      <label>
        Password
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </label>
      {error && <p role="alert">{error}</p>}
      <button type="submit">Continue</button>
    </form>
  );
}

import { useWizard } from "./useWizard";
import { AccountStep } from "./AccountStep";
import { ProfileStep } from "./ProfileStep";
import { PlanStep } from "./PlanStep";
import { WizardData } from "./wizardReducer";

interface Props {
  onComplete: (data: WizardData) => void;
}

export function WizardForm({ onComplete }: Props) {
  const { state, patch, back, isFirst, progress } = useWizard();
  const { step, data } = state;

  function finish(finalPatch: Partial<WizardData>) {
    onComplete({ ...data, ...finalPatch } as WizardData);
  }

  return (
    <div className="wizard">
      <progress value={progress} max={100} />

      {step === 0 && <AccountStep data={data} onNext={patch} />}
      {step === 1 && <ProfileStep data={data} onNext={patch} />}
      {step === 2 && <PlanStep data={data} onSubmit={finish} />}

      {!isFirst && (
        <button type="button" className="back" onClick={back}>
          Back
        </button>
      )}
    </div>
  );
}