diff --git a/README.md b/README.md index 0661cce..5b0328b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,3 @@ -
@@ -7,50 +6,75 @@ [![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 applications. +A library for creating step-by-step workflows in your apps -- 🚀 Fast -- 🔥 Powerful -- 📦 Lightweight, < 1kB (gzip) -- 🪄 Typesafe -- 🔗 Composable -- 🎨 Unstyled +- 🚀 Fast and efficient +- 🔥 Powerful and flexible +- 📦 Lightweight (< 1kB gzipped) +- 🪄 Fully typesafe +- 🔗 Composable architecture +- 🎨 Unstyled for maximum customization ## Installation ```bash -npm i @stepperize/react +npm install @stepperize/react ``` -## Understanding the steps - -The main idea is that we can define our IDs that will identify each step. -When we define the steps, we get an object that contains everything we need to build our stepper. - -## Usage +## Quick Start -### Import the constructor - -In order to create our steps we need to import the `defineSteps` from the library. +1. Import the constructor: ```tsx import { defineStepper } from "@stepperize/react"; ``` -### Create the steps - -`defineStepper` is a function that allows us to get a Provider, a hook and the array of steps we are using. -The only mandatory value for each step is the `id`. Then, we can add whatever we need and this will be typesafe when we use the hook. +2. Define your steps: ```tsx const { Scoped, useStepper, steps } = defineStepper( - { id: "step-1", title: "Label 1", description: "Description 1" }, - { id: "step-2", title: "Label 2", description: "Description 2" }, - { id: "step-3", title: "Label 3", description: "Description 3" }, - { id: "step-4", title: "Label 4", description: "Description 4" } + { 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" } ); ``` -### Next steps +3. Use the hook in your components: + +```tsx +function StepperComponent() { + const { currentStep, nextStep, prevStep } = useStepper(); + + return ( +
{currentStep.description}
+ + +