headless-stepper

Production ready React hook to create awesome stepper components. Effortless to use, easy to customize.

!npm bundle size

Documentation | Issues

Quick features

- Headless.
- 100% TypeScript.
- No dependencies.
- 100% customizable.

Start

Install the headless-stepper library using your favorite package manager:

``bash
npm install headless-stepper


or using yarn

- Using the Stepper and Step components. See the documentation for more details.
- Using the useStepper hook. See the documentation for more details.

$3

To use the Stepper and Step components, you need to import the Stepper and Step components from the headless-stepper library.

`tsx
import { Stepper, Step } from 'headless-stepper/components';

const MyAwesomeStepper = () => {
return (

Step 1 content

Step 2 content

Step 3 content

);
};

export default MyAwesomeStepper;
`

Under the hood, the Stepper component will use the useStepper hook to manage the state of the stepper. You can use the useStepper hook to build your own stepper component.

$3

`tsx
import React from 'react';
import { useStepper } from 'headless-stepper';

export interface HeadlessStepperProps {}

export function HeadlessStepper(props: HeadlessStepperProps) {
const steps = React.useMemo(
() => [
{
label: 'Step 1',
},
{ label: 'Step 2' },
{ label: 'Step 3' },
{ label: 'Step 4', disabled: true },
{ label: 'Step 5' },
{ label: 'Step 6' },
],
[]
);
const { state, nextStep, prevStep, progressProps, stepsProps } = useStepper({
steps,
});
return (