React Progress Stepper

Minimal and beautiful stepper for React.

⚙️ Installation

$ npm i react-progress-stepper
$ yarn add react-progress-stepper

🚀 Usage

import React from 'react';
import {
  Stepper,
  Step,
  useStepper,
} from "react-progress-stepper";

export default const App = () => {
  const { step, incrementStep, decrementStep } = useStepper(0, 3);

  return (
    <>
      <Stepper step={step}>
        <Step></Step>
        <Step></Step>
        <Step></Step>
      </Stepper>
      <button onClick={decrementStep}>Prev</button>
      <button onClick={incrementStep}>Next</button>
    </>
  )
}

🔎 Modules

🔹 Stepper

| Property | Type | Description | | ---------- | ------- | --------------------------------------- | | step | Integer | State to track the current step | | vertical | Boolean | Toggle vertical view | | dark | Boolean | Toggle dark mode | | numbered | Boolean | Toggle if each step is numbered or not | | theme | Object | Customize the appearance of the stepper |

🔹 Step

| Property | Type | Description | | --------------- | -------- | ---------------------------- | | customContent | Function | Override step circle content |

🔹 Content

You can customize the content of each step, as the example below:

import React from 'react';
import {
  Stepper,
  Step,
  useStepper,
  StepNumber,
  StepTitle,
  StepStatus,
  StepDescription,
} from "react-progress-stepper";

export default const App = () => {
const { step, incrementStep, decrementStep } = useStepper(0, 3);

return (
    <>
      <Stepper step={step}>
        <Step>
          <StepNumber />
          <StepTitle>Title</StepTitle>
          <StepStatus />
          <StepDescription>Description</StepDescription>
        </Step>
        <Step>
          <StepNumber />
          <StepTitle>Title</StepTitle>
          <StepStatus />
          <StepDescription>Description</StepDescription>
        </Step>
        <Step>
          <StepNumber />
          <StepTitle>Title</StepTitle>
          <StepStatus />
          <StepDescription>Description</StepDescription>
        </Step>
      </Stepper>
    </>
  )
}

StepNumber

| Property | Type | Description | | -------- | ------ | -------------- | | text | String | Customize text |

StepTitle

StepTitle comes with no property, you can pass text as children.

StepStatus

| Property | Type | Description | | --------------- | ------ | -------------- | | textProgress | String | Customize text | | textCompleted | String | Customize text | | textPending | String | Customize text |

StepDescription

StepDescription comes with no property, you can pass text as children.

🔹 useStepper

Hook to handle the state of stepper easily, you could write your own logic to handle the state.

To work properly you need to provide two arguments to useStepper:

• Number of current step: starts from 0;
• Number of total steps.

useStepper provides several utilities:

• step: state to track the current step;
• incrementStep: function to increment state by one;
• decrementStep: function to decrement state by one;
• goToStep: function to set state to a specific step number.

🎨 Theming and Style Overrides

You can customize the appearance of the stepper in two ways:

🔹 Using the theme object:

{
  light: {
    step: {
      pending: {
        background: "#ededed",
        color: "#a1a3a7",
      },
      progress: {
        background: "#3c3fed",
        color: "#ffffff",
      },
      completed: {
        background: "#23c275",
        color: "#ffffff",
      },
    },
    content: {
      pending: {
        stepNumber: { color: "#a1a3a7" },
        title: { color: "#a1a3a7" },
        status: { background: "#f2f2f2", color: "#a1a3a7" },
        description: { color: "#a1a3a7" },
      },
      progress: {
        stepNumber: { color: "#131b26" },
        title: { color: "#131b26" },
        status: { background: "#e7e9fd", color: "#3c3fed" },
        description: { color: "#131b26" },
      },
      completed: {
        stepNumber: { color: "#131b26" },
        title: { color: "#131b26" },
        status: { background: "#e9faf2", color: "#23c275" },
        description: { color: "#131b26" },
      },
    },
    progressBar: {
      pending: {
        background: "#ededed",
      },
      progress: {
        background: "#e7e9fd",
        fill: "#3c3fed",
      },
      completed: {
        background: "#e9faf2",
        fill: "#23c275",
      },
    },
  },
  dark: {
    step: {
      pending: {
        background: "#1a1a1a",
        color: "#767676",
      },
      progress: {
        background: "#19b6fe",
        color: "#ffffff",
      },
      completed: {
        background: "#23c275",
        color: "#ffffff",
      },
    },
    content: {
      pending: {
        stepNumber: { color: "#767676" },
        title: { color: "#767676" },
        status: { background: "#1a1a1a", color: "#767676" },
        description: { color: "#767676" },
      },
      progress: {
        stepNumber: { color: "#ece4d9" },
        title: { color: "#ece4d9" },
        status: { background: "#08374c", color: "#19b6fe" },
        description: { color: "#ece4d9" },
      },
      completed: {
        stepNumber: { color: "#ece4d9" },
        title: { color: "#ece4d9" },
        status: { background: "#0b3a23", color: "#23c275" },
        description: { color: "#ece4d9" },
      },
    },
    progressBar: {
      pending: {
        background: "#1a1a1a",
      },
      progress: {
        background: "#08374c",
        fill: "#19b6fe",
      },
      completed: {
        background: "#0b3a23",
        fill: "#23c275",
      },
    },
  },
}

🔹 Overriding the CSS using class names, example:

.step {
  width: 3em;
  height: 3em;
}

.step.progress {
  background: #6ab04c;
}

✏️ License and Credits

React Progress Stepper is released under the MIT license, feel free to use it, share and modify.

🔹 Credits and special thanks to:

• Vishnu Prasad for the cool and awesome design inspiration
• Sergio Acosta for the cool and awesome check mark animation
• Dren Skywalker for the beautiful Readme 💜