ステッパライズ

アプリ内で段階的なワークフローを作成するためのライブラリ

• 速くて効率的

• 強力かつ柔軟

• 軽量 (< 1kB gzip 圧縮)

• 完全にタイプセーフ

• コンポーザブルアーキテクチャ

• 最大限のカスタマイズを可能にするスタイルなし

インストール

npm install @stepperize/react

クイックスタート

1. コンストラクターをインポートします。

 import {defineStepper } から "@stepperize/react";

2. ステップを定義します。

 const {スコープ付き、useStepper、ステップ} =defineStepper(
  { id: "ステップ 1"、タイトル: "ステップ 1"、説明: "ステップ 1 の説明" },
  { id: "ステップ 2"、タイトル: "ステップ 2"、説明: "ステップ 2 の説明" },
  { id: "ステップ 3"、タイトル: "ステップ 3"、説明: "ステップ 3 の説明" },
  { id: "ステップ 4"、タイトル: "ステップ 4"、説明: "ステップ 4 の説明" });

3. コンポーネントでフックを使用します。

関数 StepperComponent() {
  const { currentStep、nextStep、prevStep } = useStepper();

  return (
 
{currentStep.title}
 
{currentStep.description}
 前へ 次へ
  );}

仕組み

Stepperize を使用すると、一意の ID を使用して一連のステップを定義できます。 defineStepper使用してステップを作成すると、次の結果が得られます。

• コンテキスト管理のためのScopedコンポーネント

• ステップ制御用のuseStepperフック

• レンダリングのための一連のsteps

各ステップで必須のフィールドはidだけです。必要なプロパティを追加することができ、フックの使用時に完全にタイプセーフになります。

ドキュメント

使用法、構成、高度な機能の詳細については、完全なドキュメントを参照してください。

貢献する

寄付を歓迎します!詳細については、貢献ガイドをご覧ください。

ライセンス

Stepperize は MIT ライセンスを取得しています。