@@ -6,75 +7,50 @@
[](https://www.npmjs.com/package/@stepperize/react)
[](https://www.npmjs.com/package/@stepperize/react)
-A library for creating step-by-step workflows in your apps
+A library for creating step-by-step workflows in your applications.
-- 🚀 Fast and efficient
-- 🔥 Powerful and flexible
-- 📦 Lightweight (< 1kB gzipped)
-- 🪄 Fully typesafe
-- 🔗 Composable architecture
-- 🎨 Unstyled for maximum customization
+- 🚀 Fast
+- 🔥 Powerful
+- 📦 Lightweight, < 1kB (gzip)
+- 🪄 Typesafe
+- 🔗 Composable
+- 🎨 Unstyled
## Installation
```bash
-npm install @stepperize/react
+npm i @stepperize/react
```
-## Quick Start
+## 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
-1. Import the constructor:
+### Import the constructor
+
+In order to create our steps we need to import the `defineSteps` from the library.
```tsx
import { defineStepper } from "@stepperize/react";
```
-2. Define your steps:
+### 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.
```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" }
+ { 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" }
);
```
-3. Use the hook in your components:
-
-```tsx
-function StepperComponent() {
- const { currentStep, nextStep, prevStep } = useStepper();
-
- return (
-
-
{currentStep.title}
-
{currentStep.description}
-
-
-
- );
-}
-```
-
-## 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
+### Next steps
-Stepperize is [MIT licensed](LICENSE).
+Visit the [documentation](https://stepperize.vercel.app/docs/getting-started/use-stepper) to see more details.
diff --git a/apps/docs/app/public/robots.txt b/apps/docs/app/robots.txt
similarity index 100%
rename from apps/docs/app/public/robots.txt
rename to apps/docs/app/robots.txt
diff --git a/packages/react/README.md b/packages/react/README.md
index ede8a51..5b0328b 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -2,23 +2,23 @@
-# Stepperize
+[](https://bundlephobia.com/result?p=@stepperize/react@latest)
+[](https://www.npmjs.com/package/@stepperize/react)
+[](https://www.npmjs.com/package/@stepperize/react)
-A powerful, lightweight library for creating step-by-step workflows in React applications.
+A library for creating step-by-step workflows in your apps
-## Features
-
-- 🚀 Fast
-- 🔥 Powerful
+- 🚀 Fast and efficient
+- 🔥 Powerful and flexible
- 📦 Lightweight (< 1kB gzipped)
-- 🪄 Typesafe
-- 🔗 Composable
-- 🎨 Unstyled
+- 🪄 Fully typesafe
+- 🔗 Composable architecture
+- 🎨 Unstyled for maximum customization
## Installation
```bash
-npm i @stepperize/react
+npm install @stepperize/react
```
## Quick Start
@@ -33,19 +33,19 @@ import { defineStepper } from "@stepperize/react";
```tsx
const { Scoped, useStepper, steps } = defineStepper(
- { id: "step-1", title: "Step 1", description: "Description 1" },
- { id: "step-2", title: "Step 2", description: "Description 2" },
- { id: "step-3", title: "Step 3", description: "Description 3" },
- { id: "step-4", title: "Step 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" }
);
```
3. Use the hook in your components:
```tsx
-function MyComponent() {
+function StepperComponent() {
const { currentStep, nextStep, prevStep } = useStepper();
-
+
return (
{currentStep.title}
@@ -59,20 +59,22 @@ function MyComponent() {
## How It Works
-Stepperize allows you to define a series of steps with unique IDs. The `defineStepper` function returns:
+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
-- `Scoped`: A Provider component to wrap your stepper
-- `useStepper`: A hook to access and control the current step
-- `steps`: An array of the defined steps
+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 detailed usage instructions and API reference, visit our [documentation](https://stepperize.vercel.app/docs/getting-started/use-stepper).
+For more detailed information on usage, configuration, and advanced features, visit our [full documentation](https://stepperize.vercel.app).
## Contributing
-We welcome contributions! Please open an issue or submit a pull request on our [GitHub repository](https://github.com/yourusername/stepperize).
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
## License
-Stepperize is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
\ No newline at end of file
+Stepperize is [MIT licensed](LICENSE).
\ No newline at end of file
