Table of Contents:

• Overview
• Demo
• Installation
• Usage
• Stepper props
• Features and Methods

Overview:

Advanced and multi-feature stepper component designed to be incredibly versatile for a variety of workflows and use cases.

It supports the following:

• Horizontal stepper UI.
• Vertical stepper UI.
• Inline stepper UI.
• Sequence stepper.
• Right to left languages.
• Custom pallet.
• Custom header.
• Custom footer.
• Navigate to the required step programmatically.

Demo:

Checkout the demo of this package on codepen

Installation:

• Via npm:

npm install react-dynamic-stepper

• Via yarn:

yarn add react-dynamic-stepper

• Via pnpm:

pnpm add react-dynamic-stepper

Usage:

import { Stepper } from 'react-dynamic-stepper';

const App = () => {
  const steps = [
          {
            header: {
              label: 'Step 1',
            },
            content: <div>First step content</div>,
            isError: false,
            isWarning: false,
            isComplete: true,
          },
          {
            header: {
              label: 'Step 2',
            },
            content: <div>Second step content</div>,
            onClickHandler: () => console.log('clicked on second step next button'),
            isLoading: false,
            isError: false,
            isComplete: true,
          },
          {
            header: {
              label: 'Step 3',
            },
            content: <div>Third step content</div>,
            isError: false,
            isComplete: true,
          },
        ];

  const submitStepper = () => {
    console.log('submitted');
  };

  return (
    <Stepper
      steps={steps}
      footerData={{
        submitHandler: submitStepper,
      }}
    />
  );
};

Stepper props:

| Prop | Type | Default | Required | Description | |------------------------------|--------------------------------|---------| --- |------------------------------------------------------------------------------------------------------| | isRightToLeftLanguage | Boolean | false | No | If true, sets the direction of the stepper to rtl | | isVertical | Boolean | false | No | If true, sets the orientation of the stepper to vertical | | isInline | Boolean | false | No | If true, sets the header display of the stepper to inline | | isSequenceStepper | Boolean | false | No | If true, sets the stepper to sequence mode (forces the user to complete steps in sequence) | | isStepConnector | Boolean | true | No | If false, removes the step connector | | ref | useRef<NavigateToStepHandler> | null | No | It exposes navigateToStep function, that can programmatically navigate the user to a specific step | | steps | StepInterface[] | - | Yes | Array of steps | | footerData | FooterDataInterface[] | - | Yes | Footer data | | pallet | PalletInterface[] | - | No | Pallet for custom color codes |

StepInterface:

| Prop | Type | Default | Required | Description | | --- |-------------------------------------------------|-------------| --- |----------------------------------------------------------------------------| | header.label | String | - | Yes | The label to display on the step header | | header.indicator | ReactNode | Step number | No | Custom indicator for the step | | content | ReactNode | - | Yes | The content to display for the step | | onClickHandler | Function: () => void or () => Promise<void> | - | No | Invoked when the next button of the current step is clicked | | isLoading | Boolean | false | No | If true, the 'Next' button will be disabled | | isError | Boolean | false | No | If true, will display the step with error UI | | isWarning | Boolean | false | No | If true, will display the step with warning UI | | isComplete | Boolean | false | Yes | If true, will display the step with completed UI and enables 'Next' button |

FooterDataInterface:

| Prop | Type | Default | Required | Description | | --- | --- |--------------------------------|--- |----------------------------------------------------------------------| | prevBtnLabel | String | Back to ${prevStepLabel} | No | Label for the prev button | | prevBtnClassName | String | undefined | No | CSS classname(s) to be applied to prev button | | nextBtnLabel | String | Continue to ${nextStepLabel} | No | Label for the next button | | nextBtnClassName | String | undefined | No | CSS classname(s) to be applied to next button | | submitBtnLabel | String | Submit | No | Label for submit button in the last step | | submitBtnClassName | String | undefined | No | CSS classname(s) to be applied to the submit button in the last step | | submitHandler | Function: () => void or () => Promise<void> | - | Yes | Invoked when the submit button is clicked |

PalletInterface:

| Prop | Type | Default | Required | Description | | --- | --- | --- | --- | --- | | default | String | #627c90 | Yes | Default color code | | warning | String | #f1c40f | Yes | Color code for warning UI | | danger | String | #e95a4b | Yes | Color code for error UI | | success | String | #4caf50 | Yes | Color code for success UI |

Features and Methods

Navigate to step programmatically:

The ref passed to the Stepper component exposes a navigateToStep function, that can programmatically navigate the user to a specific step. It can be useful in scenarios when controlling step navigation from outside the Stepper component is required.

Important Note:

Make sure to mark the required steps as completed if you want to navigate programmatically so that you can submit your stepper. This ensures that all necessary steps have been taken before the finish line.

import { useRef } from 'react';
import { Stepper } from 'react-dynamic-stepper';

const App = () => {
  const stepperRef = useRef(null);

  return (
    <>
      <button
        onClick={() => {
          stepperRef.current?.navigateToStep(1);
        }}
      >
        Navigate to step 2 programmatically
      </button>
      <Stepper
        ref={stepperRef}
        /* OTHER PROPS */
      />
    </>
  );
};

import { useRef } from 'react';
import { Stepper, NavigateToStepHandler } from 'react-dynamic-stepper';

const App = () => {
  const stepperRef = useRef<NavigateToStepHandler>(null);

  return (
    <>
      <button
        onClick={() => {
          stepperRef.current?.navigateToStep(1);
        }}
      >
        Navigate to step 2 programmatically
      </button>
      <Stepper
        ref={stepperRef}
        /* OTHER PROPS */
      />
    </>
  );
};

Invoke a function on Next button click of current step

• step.onClickHandler => This is invoked when the 'Next' button of the current step is clicked.
• If your onClickHandler returns a Promise and you want to navigate to the next step only if the Promise resolves successfully, you need to throw error inside the catch block:

const submitCurrentStep = async () => {
    try {
      /* Your business logic here */
    } catch (error) {
      throw error;
    } finally {
      /* Cleanup code here */
    }
  };