react-use-wizard

react-use-wizard is a small, zero-dependency React library for building multi-step wizards and steppers using hooks. You wrap your steps in a <Wizard> component and drive navigation with the useWizard hook, which exposes nextStep, previousStep, goToStep, the active step index, and helpers for first/last state, all without imposing any UI.

Because it focuses purely on step logic and leaves rendering entirely to you, react-use-wizard works with any styling approach and integrates cleanly with animation libraries and multi-step forms. It supports async step handlers (via handleStep) so you can run validation or side effects before advancing, and it is written in TypeScript with a tiny bundle footprint.

What You Get

• A <Wizard> wrapper component that treats each child as an individual step, with optional shared header/footer
• A useWizard hook exposing nextStep, previousStep, goToStep, activeStep, isFirstStep, and isLastStep
• Async step handlers via handleStep to run validation or side effects before advancing
• Zero dependencies and a tiny bundle size, with no imposed UI or styling
• Full TypeScript types out of the box

Common Use Cases

• Building a multi-step onboarding or signup flow
• Splitting a long form into sequential validated steps
• Creating a checkout or wizard flow with custom animations between steps

Under The Hood

Architecture - The library is a handful of focused modules under src/: wizard.tsx renders the <Wizard> and picks the active child step, wizardContext.ts holds the shared navigation state via React context, useWizard.ts is the consumer hook that reads that context, types.ts defines the public API surface, and logger.ts provides optional debug logging. Steps are plain children indexed by position, and navigation mutates the active index in context.

Tech Stack - Written in TypeScript and built with tsdx (see tsdx.config.js), targeting React as a peer dependency with zero runtime dependencies of its own. It ships ESM/CJS bundles and type declarations.

Code Quality - The repo includes a Jest test suite (test/ with jest.config.js), a CI workflow, a maintained CHANGELOG, runnable examples, and a playground. The small, single-responsibility module layout keeps the code easy to audit, though recent activity is low.

API Design - The API is intentionally minimal and ergonomic: wrap steps in <Wizard>, call useWizard() to get typed navigation controls and progress flags, and optionally register an async handleStep callback. Leaving all rendering to the developer means there is almost no configuration to learn, and the TypeScript types make the available controls discoverable in an editor.