React用のStepperライブラリreact-form-stepper

概要

フォームの入力で項目数が多い場合、複数ページで入力を分けることがあると思います。その際に、Stepperを設置すると視覚的に入力状況が分かりやすくなると思います。こちらのサンプルにある感じで、CSSとJSで実装することは可能なのですが、見栄えとかにこだわりがあまりなければ出来ればライブラリを使いたいです。
ということで今回はReact用のStepperライブラリであるreact-form-stepperを紹介します。

react-form-stepperについて

React用のStepperライブラリは探すといくつかあるのですが、react-form-stepperは非常にシンプルです。こちらのドキュメントにある通り、表示だけであればタグを一つ追加するだけです。また、stepの制御もindexを変えることで表示が変わります。
仕様がシンプルだけに、indexをstateで管理したりページの切り替え等は自分で実装することが必要になります。

実装サンプル

今回は単純に入力ページを2ページだけ用意する例です。activeStepをstateで管理して、stateの内容で表示内容を切り替えています。

sample.js

const [activeStep, setActiveStep] = useState(0);

function nextStep() {
  setActiveStep(1);
}

function previousStep() {
  setActiveStep(0);
}

return (
  <>
    <div>
      <Stepper
        steps={[
          { label: "アカウント情報" },
          { label: "ファッション情報" },
          { label: "完了" },
        ]}
        activeStep={activeStep}
        style={{ width: isWide ? "1400px" : "500px" }}
      />
    </div>
    <div className="text-center">
      <span style={{ display: activeStep === 0 ? "" : "none" }}>
        <Button variant={"primary"} onClick={nextStep}>
          次へ
        </Button>
      </span>
      <span style={{ display: activeStep === 1 ? "" : "none" }}>
        <Button variant={"info"} onClick={previousStep}>
          アカウント情報へ戻る
        </Button>
      </span>
    </div>
  </>
);

以下のような表示になります。