melangkahi

Pustaka untuk membuat alur kerja langkah demi langkah di aplikasi Anda

• Cepat dan efisien

• Kuat dan fleksibel

• Ringan (<1kB gzip)

• Sepenuhnya aman untuk mengetik

• Arsitektur yang dapat disusun

• Tanpa gaya untuk penyesuaian maksimal

Instalasi

 npm instal @stepperize/reaksi

Mulai Cepat

1. Impor konstruktor:

 impor {defineStepper } dari "@stepperize/react";

2. Tentukan langkah Anda:

 const { Cakupan, useStepper, langkah } = defineStepper(
  { id: "langkah-1", title: "Langkah 1", deskripsi: "Deskripsi untuk langkah 1" },
  { id: "langkah-2", title: "Langkah 2", deskripsi: "Deskripsi untuk langkah 2" },
  { id: "langkah-3", title: "Langkah 3", deskripsi: "Deskripsi untuk langkah 3" },
  { id: "langkah-4", title: "Langkah 4", deskripsi: "Deskripsi untuk langkah 4" });

3. Gunakan pengait di komponen Anda:

 fungsi Komponen Stepper() {
  const {Langkah saat ini,Langkah berikutnya,Langkah sebelumnya } = useStepper();

  return (
 
{currentStep.title
 
{currentStep.description
 Sebelumnya  Berikutnya
  );}

Cara Kerjanya

Stepperize memungkinkan Anda menentukan serangkaian langkah dengan ID unik. Saat Anda membuat langkah menggunakan defineStepper , Anda mendapatkan:

• Komponen Scoped untuk manajemen konteks

• Kait useStepper untuk kontrol langkah

• Serangkaian steps untuk rendering

Satu-satunya bidang yang wajib diisi untuk setiap langkah adalah id . Anda dapat menambahkan properti tambahan apa pun yang Anda perlukan, dan properti tersebut akan sepenuhnya aman untuk diketik saat menggunakan hook.

Dokumentasi

Untuk informasi lebih detail tentang penggunaan, konfigurasi, dan fitur lanjutan, kunjungi dokumentasi lengkap kami.

Berkontribusi

Kami menyambut kontribusi! Silakan lihat Panduan Berkontribusi kami untuk lebih jelasnya.

Lisensi

Stepperize berlisensi MIT.