Package Exports

headless-stepper
headless-stepper/index.esm.js
headless-stepper/index.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (headless-stepper) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 using NPM or Yarn:

npm install headless-stepper
# or using yarn
yarn add headless-stepper

Using

Basic example:

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 (
    <div className={styles['container']}>
      <div>
        <nav style={{ display: 'flex' }}>
          {stepsProps?.map((step, index) => (
            <ol key={index}>
              <a {...step}>{steps[index].label}</a>
            </ol>
          ))}
        </nav>
      </div>
      <p>Current step: {state.currentStep}</p>
      <button
        className="py-4 px-3 bg-blue-300"
        onClick={prevStep}
        disabled={!state.hasPreviousStep}
      >
        Prev
      </button>
      <button className="py-4 px-3 bg-blue-300" onClick={nextStep}>
        Next
      </button>
      <div className="bg-gray-400 w-100% h-1/2" {...progressProps} />
    </div>
  );
}

export default HeadlessStepper;

More examples will be available on documentation.

Running unit tests

Run nx test headless-stepper to execute the unit tests via Jest.

Contribute

This project was started with Nx to manage the monorepo. To learn more about Nx, read the Nx documentation.

The headless-stepper library and the documentation is under packages folder. If you're runing on local, execute the following command to start the development server:

npm run dev

The Storybook will be available on the localhost:4400 and refresh when you change the useStepper code.

Next steps

Expose the headless components instead of only the useStepper hook.

License

MIT @ Raí Siqueira.