damianricobelli / stepperize

A library for creating step-by-step workflows in your apps

Home Page:https://stepperize.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Stepperize Logo

Build Size Version Downloads

A library for creating step-by-step workflows in your apps

  • πŸš€ Fast and efficient
  • πŸ”₯ Powerful and flexible
  • πŸ“¦ Lightweight (< 1kB gzipped)
  • πŸͺ„ Fully typesafe
  • πŸ”— Composable architecture
  • 🎨 Unstyled for maximum customization

Installation

npm install @stepperize/react

Quick Start

  1. Import the constructor:
import { defineStepper } from "@stepperize/react";
  1. Define your steps:
const { Scoped, useStepper, steps } = defineStepper(
  { id: "step-1", title: "Step 1", description: "Description for step 1" },
  { id: "step-2", title: "Step 2", description: "Description for step 2" },
  { id: "step-3", title: "Step 3", description: "Description for step 3" },
  { id: "step-4", title: "Step 4", description: "Description for step 4" }
);
  1. Use the hook in your components:
function StepperComponent() {
  const { currentStep, nextStep, prevStep } = useStepper();

  return (
    <div>
      <h2>{currentStep.title}</h2>
      <p>{currentStep.description}</p>
      <button onClick={prevStep}>Previous</button>
      <button onClick={nextStep}>Next</button>
    </div>
  );
}

How It Works

Stepperize allows you to define a series of steps with unique IDs. When you create your steps using defineStepper, you get:

  • A Scoped component for context management
  • A useStepper hook for step control
  • An array of steps for rendering

The only required field for each step is the id. You can add any additional properties you need, and they'll be fully typesafe when using the hook.

Documentation

For more detailed information on usage, configuration, and advanced features, visit our full documentation.

Contributing

We welcome contributions! Please see our Contributing Guide for more details.

License

Stepperize is MIT licensed.

About

A library for creating step-by-step workflows in your apps

https://stepperize.vercel.app


Languages

Language:TypeScript 74.7%Language:MDX 19.0%Language:JavaScript 4.0%Language:CSS 2.3%