Welcome to react-step-progress 👋

Multi step and dynamic progress indicator for react. Built using typescript, hooks and lots-o'-☕ and lots-o'-❤️ . Uses CSS modules so you don't have to worry about your CSS class names clashing with ours

Install

npm install --save react-step-progress

Usage

NOTE: I'm working towards an implementation where you don't have to import the stylesheet explicitly. I feel like that's not an ideal solution. Feel free to help me out 😁

1// import the progress bar
2import StepProgressBar from 'react-step-progress';
3// import the stylesheet
4import 'react-step-progress/dist/index.css';
5
6// setup the step content
7const step1Content = <h1>Step 1 Content</h1>;
8const step2Content = <h1>Step 2 Content</h1>;
9const step3Content = <h1>Step 3 Content</h1>;
10
11// setup step validators, will be called before proceeding to the next step
12function step2Validator() {
13  // return a boolean
14}
15
16function step3Validator() {
17  // return a boolean
18}
19
20function onFormSubmit() {
21  // handle the submit logic here
22  // This function will be executed at the last step
23  // when the submit button (next button in the previous steps) is pressed
24}
25
26// render the progress bar
27<StepProgressBar
28  startingStep={0}
29  onSubmit={onFormSubmit}
30  steps={[
31    {
32      label: 'Step 1',
33      subtitle: '10%',
34      name: 'step 1',
35      content: step1Content
36    },
37    {
38      label: 'Step 2',
39      subtitle: '50%',
40      name: 'step 2',
41      content: step2Content,
42      validator: step2Validator
43    },
44    {
45      label: 'Step 3',
46      subtitle: '100%',
47      name: 'step 3',
48      content: step3Content,
49      validator: step3Validator
50    }
51  ]}
52/>;

Available Props

Required

• startingStep (number) - the index of the step at which to start

• steps (ProgressStep[]) - array of steps with each step containing a label, name and content

• onSubmit (function) - function to be executed on the last step, simulating the submit of the form

Optional

• wrapperClass (string) - CSS class name for progress wrapper element

• progressClass (string) - CSS class name for progress bar element

• stepClass (string) - CSS class name for step indicator

• labelClass (string) - CSS class name for step label

• subtitleClass (string) - CSS class name for step subtitle

• contentClass (string) - CSS class name for step content element

• buttonWrapperClass (string) - CSS class name for action buttons wrapper element

• primaryBtnClass (string) - CSS class name for primary themed button

• secondaryBtnClass (string) - CSS class name for secondary themed button

• previousBtnName (string) - Change the text inside the previous button

• nextBtnName (string) - Change the text inside the next button

• submitBtnName (string) - Change the text inside the submit button in the last step

Author

👤 Gaurav Saini

• Github: @saini-g
• LinkedIn: @saini-g

Show your support

Give a ⭐️ if this project helped you!

CONTRIBUTING & CODE OF CONDUCT

See CODE_OF_CONDUCT.md