react-dynamic-stepper

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.

Back to top

Demo:

Checkout the demo of this package on codepen

Back to top

Installation:

• Via npm:

npm install react-dynamic-stepper

• Via yarn:

yarn add react-dynamic-stepper

• Via pnpm:

pnpm add react-dynamic-stepper

Back to top

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,
      }}
    />
  );
};

Back to top

Stepper props:

Back to top

StepInterface:

Back to top

FooterDataInterface:

Back to top

PalletInterface:

Back to top

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 */
      />
    </>
  );
};

Back to top

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 */
    }
  };

Back to top