v3.1.0 — Step Validation, Reset & Richer Callbacks

🚀 New Features

• reset() — New function from useSteps() to return to the first step. Perfect for "Start Over" flows.
• beforeNext validation guard — Block navigation with sync or async validation. Pass a function to the <Steps> component that returns false to prevent moving forward. next() now returns Promise<boolean> so you can react to blocked navigation.
• onStepChange context — The callback now optionally receives { from, to } with the previous and next step numbers.

🐛 Bug Fixes

• Fixed progress returning NaN when there is only one step
• Fixed TypeScript type definitions for StepsProvider and Steps components

⚙️ Internal

• Migrated test runner from Jest to Vitest
• Fixed broken import paths (./dist → ./lib-ts)
• Added proper Vite entry point (index.html)

📦 Compatibility

All changes are fully backward-compatible. Existing code works without modification.

Version 3

This version is a major upgrade that removes some parts of the library and introduces some breaking changes.

1. Global state management is removed. You are responsible for your own state management now.
2. Step component is removed. Direct siblings of Steps component will be treated as a new step.
3. StepsProvider should wrap the component that renders Steps component. For example, if Steps component is rendered in App component, and App is rendered in index.js file, <App/> should be wrapped with StepsProvider in index.js file.
4. Methods and properties such as next, prev, isFirst, isLast should be accessed using useSteps hook.

For more details, please check the documentation.

Ports added for rendering components before or after the Step Components

In this version, the user can add two more fields to the config object: before and after.

These components are rendered along with every step component. The navigation field in the config object that's been added on v2.0.5 is still available but will be deprecated in the next big update.

For details, check out the documentation.

Config object added to Steps component

Now Steps component accepts an optional config object. It can be used for adding a Navigation component that is rendered along with every Step component, either before or after the Step component. Check documentation for details.

v2.0 with TypeScript

In this version, the structure has been re-handled in an attempt to adopt TypeScript in the project. Now, react-step-builder can be used in React/TypeScript projects.

The structure of injected props into the step components has been revised. Nested objects (e.g. props.step.order) have been flattened and every prop has been served directly inside the props object.

For a detailed explanation, please refer to the documentation (GitHub Readme file)

beforeStepChange callback

In this version, the ability to add the beforeStepChange callback function to each individual Step component is added.

When creating a Step component, you can do this:

<Step component={Step1} beforeStepChange={() => { console.log('i will be called when user is moving to another step'); } />

Bug fix in checkboxes

props.handleChange method is fixed to support checkbox form components.
Another bug fixed in props.setState method.

Unnecessary dependency removed

• jshint library is removed from devDependencies list

Stable version

Integration with CI platforms completed.

Stable release

For details, please refer to readme file.

Here is a summary:

• Underlying data structure has been upgraded to an object oriented model
• Wrapper components are combined in a single file
• Helper methods are re-handled and synced to the underlying StepBuilder object's methods
• UI components for navigation are completely removed from the package
  • No more UI component will be provided to keep it completely UI-agnostic
  • Main focus of the package shall remain on the helper methods in ready-served props