npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-dynamic-stepper

v2.0.0

Published

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

Downloads

220

Readme

Storybook Npm version Npm downloads Npm minified Npm CICD

Table of Contents:

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 | | header.indicator.isKeepIndicatorOnComplete | Boolean | false | No | Keep header indicator when step is completed | | footer.nextButtonLabel | String | Continue to ${nextStepLabel} or Submit | No | Set next button label of the current step | | footer.prevButtonLabel | String | Back to ${prevStepLabel} | No | Set prev button label of the current step | | footer.isPreventNextClick | Boolean | false | No | If true, clicking the ‘Next’ or ‘Submit’ button for the current step will not trigger any action unless its set to false | | footer.onClickHandler | Function: () => void or () => Promise<void> | - | No | Invoked when the next button of the current step is clicked | | content | ReactNode | - | Yes | The content to display for the step | | 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 | | disabled | String | #e3e8ec | Yes | Color code for disabled 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 */
    }
  };

Resources