react-headless-multi-stepper v0.1.2

React Headless Multi Stepper

Design your own Multi Stepper component without having to worry about the logic. Then this tiny and performant package is for you. react-headless-multi-stepper is ideal if you are working with a utility-based css framework like TailwindCSS. react-headless-multi-stepper offers plenty of customization through generics and is also fully typed.

Install

yarn add react-headless-multi-stepper

Demo: Unstyled & TailwindCSS

Storybook

Usage

import { MultiStepper } from "react-headless-multi-stepper";

...
return (
  <MultiStepper
    {...args}
    RootContainer={<div />}
    MainLabelContainer={<ul />}
    SubLabelContainer={<ul />}
    ContentContainer={<div />}
    onChange={(step)}
    onCompleted={() => alert("onCompleted")}
    renderMainLabel={(props) => <li>{props.label}</li>}
    renderSubLabel={(props) => <li>{props.label}</li>}
  >
    <MultiStepper.VerticalStep name="1" label="step 1">
      <MultiStepper.HorizontalStep name="1.1" label="1.1">
        {({ goPrevious, goNext }) => (
          <div>
            Content 1.1
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
      <MultiStepper.HorizontalStep name="1.2" label="1.2">
        {({ goPrevious, goNext }) => (
          <div>
            Content 1.2
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
      <MultiStepper.HorizontalStep name="1.3" label="1.3">
        {({ goPrevious, goNext }) => (
          <div>
            Content 1.3
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
    </MultiStepper.VerticalStep>
    <MultiStepper.VerticalStep name="2" label="step 2">
      <MultiStepper.HorizontalStep name="2.1" label="2.1">
        {({ goPrevious, goNext }) => (
          <div>
            Content 2.1
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
      <MultiStepper.HorizontalStep name="2.2" label="2.2">
        {({ goPrevious, goNext }) => (
          <div>
            Content 2.2
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
      <MultiStepper.HorizontalStep name="2.3" label="2.3">
        {({ goPrevious, goNext }) => (
          <div>
            Content 2.3
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
    </MultiStepper.VerticalStep>
    <MultiStepper.VerticalStep name="3" label="step 3">
      <MultiStepper.HorizontalStep name="3.1" label="3.1">
        {({ goPrevious, goNext }) => (
          <div>
            Content 3.1
            <button onClick={goPrevious}>previous</button>
            <button onClick={goNext}>next</button>
          </div>
        )}
      </MultiStepper.HorizontalStep>
    </MultiStepper.VerticalStep>
  </MultiStepper>
);

An example of a styled version can be found in stories/MultiStepper.stories.tsx.

MultiStepper props

The following table contains all optional and required props for the MultiStepper. The library is strictly typed and uses generics to support many different kinds of data.

*these are required \ **IRenderLabel contains all information to render your horizontal or vertical label (i.e. activeIndex, label, name, index, array).

VerticalStep props

The following table contains all optional and required props for the VerticalStep component. VerticalSteps are placed as children inside the MultiStepper.

*these are required

HorizontalStep props

The following table contains all optional and required props for the HorizontalStep component. HorizontalSteps are placed as children inside the VerticalStep.

*these are required \ ** IHorizontalStep: goPrevious and goNext are both callback functions that return nothing.

Authors

• Fullhdpixel