https://github.com/damianricobelli/stepperize

A library for creating step-by-step workflows in your apps
https://github.com/damianricobelli/stepperize

primitive react react-native shadcn-ui stepper typesafe

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/damianricobelli/stepperize
• Owner: damianricobelli
• Created: 2024-04-09T03:31:54.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-08-23T07:25:38.000Z (5 months ago)
• Last Synced: 2024-08-24T05:31:39.280Z (5 months ago)
• Topics: primitive, react, react-native, shadcn-ui, stepper, typesafe
• Language: TypeScript
• Homepage: https://stepperize.vercel.app
• Size: 711 KB
• Stars: 771
• Watchers: 7
• Forks: 34
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


  



[![Build Size](https://img.shields.io/bundlephobia/minzip/@stepperize/react@latest?label=bundle%20size&style=flat&colorA=000000&colorB=000000)](https://bundlephobia.com/result?p=@stepperize/react@latest)

[![Version](https://img.shields.io/npm/v/@stepperize/react?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/react)

[![Downloads](https://img.shields.io/npm/dt/@stepperize/react.svg?style=flat&colorA=000000&colorB=000000)](https://www.npmjs.com/package/@stepperize/react)

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

```bash

npm install @stepperize/react

```

## Quick Start

1. Import the constructor:

```tsx

import { defineStepper } from "@stepperize/react";

```

2. Define your steps:

```tsx

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" }

);

```

3. Use the hook in your components:

```tsx

function StepperComponent() {

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

  return (

    


      
{currentStep.title}

      
{currentStep.description}

      Previous

      Next

    

  );

}

```


## 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](https://stepperize.vercel.app).

## Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.

## License

Stepperize is [MIT licensed](LICENSE).