steppen

Eine Bibliothek zum Erstellen schrittweiser Arbeitsabläufe in Ihren Apps

• Schnell und effizient

• Leistungsstark und flexibel

• Leicht (< 1 KB gezippt)

• Vollständig typsicher

• Zusammensetzbare Architektur

• Ungestylt für maximale Individualisierung

Installation

 npm install @stepperize/react

Schnellstart

1. Importieren Sie den Konstruktor:

 import { defineStepper } from „@stepperize/react“;

2. Definieren Sie Ihre Schritte:

 const { Scoped, useStepper, Schritte } = defineStepper(
  { id: „step-1“, title: „Step 1“, description: „Beschreibung für Schritt 1“ },
  { id: „Schritt-2“, Titel: „Schritt 2“, Beschreibung: „Beschreibung für Schritt 2“ },
  { id: „Schritt-3“, Titel: „Schritt 3“, Beschreibung: „Beschreibung für Schritt 3“ },
  { id: „Schritt-4“, Titel: „Schritt 4“, Beschreibung: „Beschreibung für Schritt 4“ });

3. Verwenden Sie den Hook in Ihren Komponenten:

 Funktion StepperComponent() {
  const { currentStep, nextStep, prevStep } = useStepper();

  return (
 
{currentStep.title}
 
{currentStep.description}
 Previous  Weiter
  );}

Wie es funktioniert

Mit Stepperize können Sie eine Reihe von Schritten mit eindeutigen IDs definieren. Wenn Sie Ihre Schritte mit defineStepper erstellen, erhalten Sie:

• Eine Scoped -Komponente für die Kontextverwaltung

• Ein useStepper Haken zur Schrittkontrolle

• Eine Reihe von steps zum Rendern

Das einzige erforderliche Feld für jeden Schritt ist die id . Sie können alle zusätzlichen Eigenschaften hinzufügen, die Sie benötigen, und diese sind bei Verwendung des Hooks vollständig typsicher.

Dokumentation

Ausführlichere Informationen zu Nutzung, Konfiguration und erweiterten Funktionen finden Sie in unserer vollständigen Dokumentation.

Mitwirken

Wir freuen uns über Beiträge! Weitere Informationen finden Sie in unserem Beitragsleitfaden.

Lizenz

Stepperize ist MIT-lizenziert.